Warum werden lokale Bilder in meiner React-App nicht geladen?

Lokale Bilder werden in der React-App nicht geladen

In React kommt es häufig zu Problemen, bei denen lokale Bilder nicht geladen werden, während externe Bilder dies tun. Dieses Problem kann bei der Verwendung von Webpack auftreten, einem Bundler, der Front-End-Code optimiert und verpackt.

Verstehen des Problems

Webpack fügt Assets wie Bilder in das ein gebündelter Code. Standardmäßig werden lokale Bilder ohne explizite Einbeziehung nicht erkannt. Dies liegt daran, dass Webpack erwartet, dass Bilder als Module importiert werden, sodass es sie verarbeiten und optimieren kann.

Lösung: Lokale Bilder erforderlich

Um das Problem zu beheben, benötigen Sie um lokale Bilder in Ihren React-Komponenten zu erfordern. Ersetzen Sie Folgendes:

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

Durch:

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

Indem Sie Bilder erfordern, schließen Sie diese explizit in das Webpack-Bundle ein, sodass es den Quellpfad verarbeiten und durch das richtige Bundle ersetzen kann Vermögenswert. Auf diese Weise kann React erfolgreich lokale Bilder aus dem kompilierten Code laden.

Durch diese Änderung sollten Sie in der Lage sein, lokale Bilder ohne Probleme in Ihre React-Anwendung zu laden.

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