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

Résoudre le problème gênant de chargement d'images locales dans React

Lorsque vous travaillez avec React, vous pouvez rencontrer un scénario dans lequel vos images locales ne se chargent pas, tandis que les images externes s'affichent sans un accroc. Cela peut être dû à une idée fausse courante concernant le traitement des images dans Webpack.

Webpack joue un rôle crucial dans le processus de développement, et il est essentiel de comprendre comment il gère les ressources d'image. Contrairement aux images externes, les images locales doivent être explicitement importées dans Webpack pour être traitées. Cette distinction devient apparente dans votre code, où l'image externe "placehold.it/200x200" se charge avec succès, tandis que l'image locale "/images/resto.png" reste invisible.

Pour corriger ce problème et vous assurer que vos images locales s'affichent comme prévu, vous devez remplacer la syntaxe source actuelle par la suivante :

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

En incluant la directive "require", vous indiquez explicitement Webpack pour traiter l'image et l'inclure dans le bundle. Cela permet à Webpack d'effectuer ses tâches d'optimisation et de remplacement d'image, résolvant ainsi le problème de chargement. Pour chaque image que vous souhaitez charger, n'oubliez pas de remplacer "resto.png" par le nom de l'image approprié.

Cette simple modification garantira que vos images locales sont traitées et chargées correctement, améliorant ainsi l'expérience utilisateur de votre Application React.

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!