Bedingtes Rendern und Bildpfad in React JS

Question

Ich verstehe keinen Moment wirklich. Angenommen, ich habe eine Komponente, die Daten wie folgt bedingt wiedergibt:

<div>
{isLoading ? <img src="../pathname/img.jpg" alt="loading" /> : <Page />}
</div>

Das Bild wird nicht auf diese Weise gerendert, sondern zeigt ein fehlerhaftes Dateisymbol. Wenn ich jedoch dasselbe Bild importiere , funktioniert es einwandfrei:

import loadingImage from "../pathname/img.jpg"
<div>
{isLoading ? <img src={loadingImage} alt="loading" /> : <Page />}
</div>

Ich benutze npm startund mein Editor ist VS Code. Wissen Sie, was möglicherweise der Grund für den Import ist und geben Sie nicht einfach einen Pfadnamen ein, srcauch wenn der Pfad derselbe ist? Der von mir angegebene Pfad und Dateiname war im ersten Beispiel zu 100% korrekt.

Answer 1

Dies geschieht, weil sich Ihr Bild wahrscheinlich nicht im publicOrdner befindet.

Sie können dem öffentlichen Ordner Assets hinzufügen und haben dann Zugriff darauf.

Beispiel: Für den folgenden Code benötigen Sie einen pathnameOrdner mit der Datei img.jpg im publicOrdner.

<img src="../pathname/img.jpg" alt="loading" />

Der beste Weg, dies zu tun, ist der Import in JavaScript-Dateien. Dieser Mechanismus bietet eine Reihe von Vorteilen:

• Skripte und Stylesheets werden minimiert und gebündelt, um zusätzliche Netzwerkanforderungen zu vermeiden.
• Dateien sind im Bundle enthalten
• Fehlende Dateien verursachen Kompilierungsfehler anstelle von 404-Fehlern für Ihre Benutzer.
• Die Dateinamen der Ergebnisse enthalten Inhalts-Hashes, sodass Sie sich keine Sorgen machen müssen, dass Browser ihre alten Versionen zwischenspeichern.

Mit import, wenn die Seite gerendert wird, werden Sie sometinhg wie dies im Bild sehen: src="/static/media/img.xxxxx.jpg". Das liegt daran, dass die Verwendung von Import das Webpack anweist, diese Datei in das Bundle aufzunehmen.

Sie können hier mehr überprüfen - Hinzufügen von Bildern, Schriftarten und Dateien und hier Verwenden des öffentlichen Ordners

Answer 2

Sie vermissen die geschweiften Klammern. Das wird funktionieren:

<div>
  {isLoading ? <img src={'../pathname/img.jpg'} alt='loading' /> : <Page />}
</div>