Logo Zéphyrnet

Importer des images avec React

Date :

Introduction

Lors du développement d'applications Web avec React, nous souhaitons généralement inclure des éléments visuels pour capter l'intérêt des utilisateurs. Ces éléments visuels peuvent être n'importe quel type d'image, y compris les JPG, PNG, SVG, GIF et bien d'autres.

Dans cet article, nous allons apprendre à importer des images avec React et voir les différentes manières d'y parvenir.

Les images externes et les images locales sont les deux types d'images que nous souhaitons utiliser dans notre application React. Nous nous intéressons principalement aux images locales dans cet article car les images externes ne nous obligent pas à les importer.

Les images externes sont des images qui ont déjà été hébergées en externe et sont accessibles par n'importe qui via une URL, tandis que les images locales sont des images qui ne sont disponibles que sur notre ordinateur local ou dossier de projet et que nous voulons utiliser dans notre application.

Comment afficher des images hébergées en externe

Avant d'aborder la façon d'importer des images, il est important de comprendre que les images hébergées ailleurs fonctionnent de la même manière que nous avons toujours utilisé des images en HTML - en ajoutant l'URL au src attribut de la img tag:

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

Voyons maintenant comment importer des images (locales) avec React !

Comment importer des images avec React

Hormis les images externes, la manière dont les images sont utilisées dans React diffère considérablement de celle des autres frameworks ou même du HTML. Ces images doivent d'abord être importées dans React avant de pouvoir être utilisées dans notre application.

Ceci peut être accompli de deux manières : en utilisant le import déclaration ou en utilisant la require() fonction. Nous allons passer en revue les deux approches.

Comment importer des images avec React en utilisant le importer Déclaration

Parce qu'il est plus facile à lire et à comprendre, le import est la méthode la plus couramment utilisée pour importer des images stockées localement dans React. Les images sont traitées comme exportations par défaut, et lorsque nous les importons, nous le faisons de la même manière que nous importons des composants. Cela se fait en spécifiant le chemin relatif du fichier à l'image que nous importons :

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

Dans le code ci-dessus, nous utilisons toujours le img balise et src attribut, mais cette fois le src L'attribut reçoit une variable plutôt qu'une chaîne, qui est transmise à l'aide d'accolades dans JSX.

Remarque: Nous pouvons importer autant d'images que nous le souhaitons, mais chaque image doit avoir un nom unique dans l'instruction d'importation, sinon cela générera une erreur.

Il est important de comprendre comment spécifier et obtenir des chemins relatifs pour les fichiers ; sinon, des bogues et des erreurs peuvent survenir. Dans l'exemple précédent, l'image a été enregistrée dans un /src/images.

Comment importer des images avec React à l'aide de la fonction require ()

La require() La fonction est une fonction Node.js utilisée pour inclure des modules externes à partir de fichiers autres que le fichier actuel. Il fonctionne de la même manière que le import déclaration et nous permet d'inclure des images :

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

La seule différence est la première ligne où nous avons demandé l'image via son chemin relatif, puis l'avons stockée dans une variable à laquelle nous avons accédé dans le img balise via des accolades.

Nous pouvons également décider de le faire en ligne et éviter la ligne supplémentaire utilisée pour affecter l'image à une variable, car ce n'est pas obligatoire :

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

Conclusion

Nous avons appris à importer des images locales à l'aide de import déclaration et le require() fonction dans cet article.

spot_img

Dernières informations

spot_img