React Image src

1. Référencer une image locale dans React à l’aide du package create-react-app
2. Charger une image à l’aide de la déclaration import dans React
3. Charger une image à l’aide de la méthode require() dans React
4. Comment import et require() fonctionnent dans React

Si vous débutez avec React, vous avez probablement remarqué que React utilise une syntaxe de type HTML appelée JSX. Cette syntaxe fournit un moyen simple d’écrire des applications React. Lorsqu’il s’agit d’inclure des images dans l’application, les choses deviennent un peu boueuses. Contrairement au HTML, le code React subit de nombreuses modifications avant d’être présenté aux utilisateurs.

Lors du passage du mode développement au mode production, l’emplacement relatif des images peut changer. Vous avez besoin d’un moyen fiable d’importer et d’inclure des images dans vos composants React.

Référencer une image locale dans React à l’aide du package create-react-app

Lors du développement d’une application React, vous pouvez facilement inclure une image tant que votre environnement de développement inclut webpack. Lors de l’utilisation du package create-react-app, webpack est automatiquement inclus.

La balise d’élément dans JSX fonctionne de la même manière qu’en HTML - il s’agit d’une balise img à fermeture automatique. Les développeurs peuvent utiliser l’attribut src pour spécifier le chemin. Dans cet exemple, l’élément img utilise l’URL de l’image codée en dur comme source :

class App extends Component {
  render() {
    return <img src="https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg"/>
  }
}

Si vous souhaitez spécifier un chemin relatif vers l’emplacement de l’image dans le dossier, les choses deviennent un peu plus compliquées. Fournir une source pour une image n’est pas aussi simple que de définir l’attribut src égal à un chemin de fichier relatif sur l’ordinateur. Tout d’abord, les navigateurs sandbox ne peuvent pas accéder au chemin relatif du fichier src de votre ordinateur. Vous ne pouvez surtout pas vous fier au chemin d’accès local une fois l’application déployée. Au lieu de cela, les développeurs doivent utiliser les instructions import ou require() pour charger l’image.

Lors du développement d’un projet create-react-app, c’est une bonne pratique d’avoir un dossier d’actifs pour stocker toutes vos images. Généralement, ce dossier est créé dans le dossier src de votre projet. En supposant que vous suiviez cette convention pour stocker les images, regardons comment vous importeriez et utiliseriez des images comme valeur pour l’attribut src.

Charger une image à l’aide de la déclaration import dans React

Vous pouvez également utiliser l’instruction import pour charger une image. Cela semble simple et atteint le même objectif que l’URL codée en dur :

import React, { Component } from "react";
import image from "./assets/cat.jpg";
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

Tant que vous fournissez un chemin valide, votre create-react-app devrait afficher une image.

Dans ce cas, le chemin fonctionne car les deux dossiers testComponent et assets sont situés dans le dossier src. La fin du chemin - cat.jpg n’est qu’un nom du fichier individuel.

L’instruction import offre un avantage supplémentaire en stockant l’actif importé dans une variable. Lors de la définition d’une valeur pour l’attribut src, vous pouvez référencer le nom de la variable à partir de l’instruction import.

Vous pouvez en savoir plus sur l’importation ici.

Charger une image à l’aide de la méthode require() dans React

Les développeurs React utilisent la méthode require() pour charger différents types de modules. Il peut également être utilisé pour charger des images.

Si vous souhaitez l’utiliser dans JSX, la méthode require() doit être placée entre les accolades. Comme vous le savez peut-être, le code entre les accolades est interprété comme un code JavaScript valide dans JSX.

<img src={require("./assets/cat.jpg").default} />

La méthode require() prend un argument, un chemin relatif valide vers une image. Notez également que vous devez accéder à la propriété .default de l’objet renvoyé dans certains navigateurs.

Alternativement, vous pouvez créer une variable image pour stocker votre image, puis la référencer dans votre composant. Voici un exemple :

const image = require("./assets/cat.jpg").default;
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

Vous pouvez nommer la variable comme vous le souhaitez. Il n’a pas besoin de s’appeler image.

N’oubliez pas que si vous souhaitez référencer une variable JavaScript dans React, vous devez l’entourer d’accolades.

Il n’y a pas de différence entre la méthode require() et l’instruction import concernant les performances.

Comment import et require() fonctionnent dans React

Certains développeurs React pourraient trouver surprenant que webpack (et d’autres bundlers) gère le chargement d’images, pas JavaScript ou React.

Lorsque vous chargez une image dans un composant, le bundler enregistre en interne l’association entre le composant et l’image. Ensuite, il va rechercher l’actif, le copier, lui donner un nom unique et le placer dans le répertoire accessible sur le serveur.