Pourquoi mes images locales ne se chargent-elles pas dans mon application React ?

Les images locales ne se chargent pas dans l'application React

En développant une application React, les utilisateurs peuvent rencontrer un problème où les images stockées localement refusent de s'afficher. Malgré le rendu réussi des images hébergées en externe (par exemple, placehold.it/200x200), les images locales restent insaisissables. Pour résoudre ce problème, il est essentiel d'approfondir la configuration du serveur.

Inspection du code de l'application

Le code fourni pour App.js, index.js et le serveur. js semble standard sans aucune anomalie apparente. Cependant, l'enquête sur la source de l'image dans App.js révèle la racine du problème :

<img src={"/images/resto.png"} />

La résolution du Webpack

Lors de l'utilisation de Webpack, les images définies par l'utilisateur doivent être explicitement requis pour que l'outil puisse les traiter. L'utilisation actuelle nécessite que Webpack localise l'image dans le répertoire "/images" et l'affiche. Sans cette étape, Webpack ignore les images locales, entraînant leur absence de l'application.

La modification requise

Pour corriger le problème, remplacez la source de l'image actuelle par la syntaxe suivante :

<img src={require('/images/resto.png')} />

En exigeant l'image, Webpack peut désormais traiter et remplacer la source d'origine dans App.js par l'image correcte, permettant à l'image locale de s'afficher comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!