Wie kann in React.js eine konsistente Bildanzeige über Routen hinweg sichergestellt werden?

Grundlegendes zum Verhalten von Root-Ursprungspfaden

In React.js-Projekten basieren Bildpfade, die das src-Attribut verwenden, nicht auf der Dateistruktur, sondern auf der Root-Ursprung der URL. Das bedeutet, dass, wenn Ihre Anwendung unter „localhost/details/2“ bereitgestellt wird, Bilder, auf die mit relativen Pfaden verwiesen wird, korrekt geladen werden, solange der Pfad innerhalb dieser Route unverändert bleibt. Wenn sich die Route jedoch in „localhost/details/2/id“ ändert, werden Bilder möglicherweise nicht angezeigt, da sich der Stammursprung geändert hat.

Bildpfadabhängigkeit von Routen auflösen

Um eine konsistente Bildanzeige über Routen hinweg sicherzustellen, sollten Sie die Verwendung absoluter Pfade in Betracht ziehen. So können Sie Bilder mit absoluten Pfaden importieren und referenzieren:

import myImage from '/img/myImage.png'; // Absolute path to image

function File1() {
  return <img src={myImage} alt="My Image" />;
}

Durch den Import von Bildern als Module etablieren Sie einen absoluten Referenzpunkt, der unabhängig von Routenänderungen konsistent bleibt. Dieser Ansatz stellt sicher, dass Bilder immer vom richtigen Speicherort abgerufen werden.

Alternative Ansätze

Wenn Sie relative Pfade bevorzugen, können Sie diese Alternativen verwenden:

• Verwenden Sie den öffentlichen Ordner: Verschieben Sie Ihre Bilder in das öffentliche Verzeichnis, das von der Create-React-App automatisch verfügbar gemacht wird und von jeder Route mit einem relativen Pfad aus zugänglich ist.
• Webpack konfigurieren: Durch Ändern der Webpack-Konfiguration können Sie anpassen, wie relative Pfade aufgelöst werden. Dies ist jedoch eine komplexere Lösung.

Das obige ist der detaillierte Inhalt vonWie kann in React.js eine konsistente Bildanzeige über Routen hinweg sichergestellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!