Comment utiliser les images sur ReactJS ?

Ambient IT est un organisme de formation spécialisé dans l’informatique et les métiers du numérique.

Avec notre équipe d’experts, nous proposons à nos clients des formations exclusives sur des technologies de pointe, mais aussi du contenu qualitatif pour que vous vous renseigniez sur les dernières nouveautés numériques.

Si vous souhaitez approfondir vos connaissances sur l’usage des images avec React, vous pouvez vous renseigner sur le hook React Image. Vous pouvez également suivre notre formation Reactjs et notre formation React Avancé.

L’équipe Ambient IT

Les différentes manières d’importer des images

React propose différentes manières d’importer ses images. Ci-dessous, nous vous expliquerons en détail les différentes techniques d’importations en présentant leurs avantages et inconvénients.

Comment insérer une image locale sur React ?

Il existe deux façons d’insérer des images locales, nous pouvons soit utiliser le mot clé import ou récupérer son image depuis un dossier.

Utiliser Import

• Avantages de cette méthode :
  • Tous les assets sont manipulés par le système de construction, les noms de nos fichiers sont hashés pendant la compilation.
  • Nous recevons un message d’erreur si le fichier est supprimé ou déplacé.
• Inconvénient de cette méthode :
  • Cette méthode ne permet pas l’import dynamique d’images qui est nécessaire lorsque nous devons gérer un nombre important d’assets.

Code :

// Le fichier image.png doit être dans le même dossier que le fichier JS
// On importe l'image en utilisant son chemin
import image from './image.png';

// Afficher l'image importée
function image(){
  return image;
}

Nous pouvons également importer une image en utilisant un fichier CSS

// Importer son image sur son code JS au préalable
// Afficher son image grâce à la classe image
.image {
  background-image: url(./image.png);
}

Pour réduire le nombre de requêtes adressées au serveur, l’importation d’images bmp, gif, jpg, jpeg, et png de moins de 10 000 octets renvoie une URI de données au lieu d’un chemin. Vous pouvez contrôler ce seuil en définissant la variable d’environnement IMAGE_INLINE_SIZE_LIMIT. Pour en savoir plus, vous pouvez consulter la documentation avancée de React évoquant sa configuration avancée.

Charger son image depuis un dossier

• Avantages de cette méthode :
  • Permet d’importer un nombre important d’image sans avoir à changer son code.
  • Réduction de la taille du code en supprimant «import».
• Inconvénient de cette méthode :
  • Nous ne recevons pas de message d’erreur si le fichier est supprimé ou déplacé.
  • Comme le nom de notre image n’est pas hashé, le cache busting n’est pas appliqué. Si la durée de mise en cache n’est pas expirée, l’image affichée ne sera pas actualisé si nous l’avons modifié.

Code :

// Le fichier image.png doit être dans un dossier (généralement le dossier public)
function image(){
  return ;
}

Comment insérer une image provenant de source externe sur React ?

• Avantages de cette méthode :
  • La méthode la plus simple et rapide pour importer des images
  • Permet de soulager son serveur, car l’image provient d’un serveur extérieur
• Inconvénient de cette méthode :
  • Nous n’avons pas le contrôle sur l’image. Elle peut être supprimée ou modifiée sans que nous le souhaitions.
  • Généralement, l’image chargera plus rapidement si elle est stockée dans notre serveur

Code :

// Mettre l'URL de l'image pour l'attribut "src"
function image() {
   return (
     image;
   );
 }

Cette méthode n’est pas recommandée, car nous perdons totalement le contrôle sur notre image. Le mieux reste d’importer une image dans son serveur pour l’utiliser ensuite.

Comment charger une image dynamiquement ?

Pour afficher une image dynamiquement, nous chargeons nos assets depuis un dossier. Les points forts et les points faibles du chargement dynamique sont alors les mêmes que ceux cités précédemment à propos du chargement d’une image locale depuis un dossier.

Code :

// Mettre l'URL de l'image pour l'attribut "src" 
function image() {  
   //Créer une variable stockant le nom de l'image 
   const nomImage = "nom de l'image";
  
   return (      
      

         
      
    
   );  
}

Insérer des images SVG

La méthode d’import des fichiers SVG ressemble à la méthode utilisée pour l’intégration d’autres fichiers images. Les différences sont l’ajout d’une div imbriquant notre image, l’utilisation de l’élément ReactComponent et des accolades {}.

Important : Cette méthode est uniquement applicable depuis la mise à jour [email protected] et [email protected].

import { ReactComponent as image } from './image.svg';
function image() {
  return (
    

      {/* image est un composant React*/}
      
    
  );
}

Les bonnes pratiques pour utiliser la balise IMG

Ne pas mettre son fichier sur son ordinateur

En utilisant img dans un composant React, la prop src doit pointer vers un chemin que le serveur peut servir. C’est pour cela qu’il faut éviter de charger ses images à partir d’un dossier provenant de son ordinateur. De nos jours, les navigateurs sont pour la plupart protégés par un sandbox et ne vous laissent pas accéder aux fichiers par leur chemin d’accès sur le disque.

La meilleure méthode pour afficher des images

Pour des images uniques, le mot clé import permettra d’utiliser le cache busting et vous découvrirez rapidement si la construction échoue contrairement à la méthode de l’insertion depuis un dossier. La méthode import est généralement l’approche recommandée.

Pour des images génériques s’affichant sur votre site, il est utile d’insérer dynamiquement ses images provenant de votre dossier. Ainsi, vous n’aurez pas à dupliquer vos images et vous n’aurez pas à importer fichiers un par un.