Les images locales ne se chargeant pas dans l'application react

Développement d'une application React, les utilisateurs peuvent rencontrer un problème lorsque les images stockées localement refusent d'afficher. Bien que le rendu des images ait réussi à héberger à l'extérieur (par exemple, placehold.it/200x200), les images locales restent insaisissables. Pour résoudre ce problème, il est essentiel de plonger dans la configuration du serveur.

inspectant le code d'application

le code fourni pour app.js, index.js, et server.js apparaît standard sans aucune anomalie apparente. Cependant, enquêter sur la source d'image dans app.js révèle la racine du problème:

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

la résolution webpack

lors de l'utilisation de webpack, utilisateur-désiro outil pour les traiter. L'utilisation actuelle nécessite WebPack pour localiser l'image dans le répertoire "/ images" et l'afficher. Sans cette étape, WebPack ignore les images locales, résultant en leur absence à partir de l'application.

la modification requise

pour rectifier le problème, remplacez la source d'image actuelle par la syntaxe suivante:

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

En nécessitant 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.