In einem React-Projekt werden die Bilder standardmäßig aus dem public-Ordner geladen. Die Image-Pfade werden relativ zu diesem Ordner angegeben. Versucht man ein Bild aus dem src-Verzeichnis zu laden, wird es nicht angezeigt. Die beiden unteren <img>-Elemente sind identisch und laden das Bild public/images/logo192.png, wenn es dort existiert:
<img src="./images/logo192.png" alt="" width="300" height="300" /> <img src="images/logo192.png" alt="" width="300" height="300" />
![React-HTML-img [Image]](http://www.technik-tipps-und-tricks.de/wp-content/uploads/2020/02/React-HTML-img.png)
Der Grund ist ganz einfach. Die Dateien aus dem public-Ordner werden beim Kompilieren in den Production-Build der Anwendung hinzugefügt. Das Release enthält keine Quellcode-Dateien und Verzeichnisse. Daher sollen die Bilder immer in dem public-Verzeichnis abgelegt werden.
Soll ein Bild trotzdem aus dem src-Verzeichnis geladen werden, muss die require-Anweisung benutzt werden.
<img src={require("./assets/flag-de.png")} />
Ein Image-Pfad ausserhalb des src-Verzeichnisses generiert ein Compiler-Fehler.
![image-import-failed [Image]](http://www.technik-tipps-und-tricks.de/wp-content/uploads/2020/02/image-import-failed.png)
War dieser Beitrag für dich informativ? Hat er dir gefallen oder geholfen?
Dann unterstütze die Weiterentwicklung dieser Webseite mit einer kleinen Spende!
Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.
