Warum werden meine lokalen Bilder nicht in meine React-Anwendung geladen?

Lokale Bilder können in der React-Anwendung nicht geladen werden

Bei der Entwicklung einer React-Anwendung können Benutzer auf ein Problem stoßen, bei dem lokal gespeicherte Bilder nicht angezeigt werden. Obwohl extern gehostete Bilder (z. B. placehold.it/200x200) erfolgreich gerendert wurden, sind lokale Bilder weiterhin schwer zu finden. Um dieses Problem zu beheben, ist es wichtig, sich mit der Serverkonfiguration zu befassen.

Überprüfung des Anwendungscodes

Der bereitgestellte Code für App.js, index.js und Server. js erscheint standardmäßig ohne erkennbare Anomalien. Die Untersuchung der Bildquelle in App.js offenbart jedoch die Ursache des Problems:

<img  src="%7B%22/images/resto.png%22%7D" alt="Warum werden meine lokalen Bilder nicht in meine React-Anwendung geladen?" >

Die Webpack-Auflösung

Bei der Verwendung von Webpack müssen benutzerdefinierte Bilder verwendet werden explizit erforderlich sein, damit das Tool sie verarbeiten kann. Die aktuelle Verwendung erfordert, dass Webpack das Bild im Verzeichnis „/images“ findet und anzeigt. Ohne diesen Schritt ignoriert Webpack lokale Bilder, was dazu führt, dass sie in der Anwendung fehlen.

Die erforderliche Änderung

Um das Problem zu beheben, ersetzen Sie die aktuelle Bildquelle durch die Folgende Syntax:

<img  src="%7Brequire('/images/resto.png')%7D" alt="Warum werden meine lokalen Bilder nicht in meine React-Anwendung geladen?" >

Durch die Anforderung des Bildes kann Webpack nun die Originalquelle in App.js verarbeiten und durch das richtige Bild ersetzen, was dies ermöglicht Das lokale Bild soll wie vorgesehen angezeigt werden.

Das obige ist der detaillierte Inhalt vonWarum werden meine lokalen Bilder nicht in meine React-Anwendung geladen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!