Wie löse ich Bildpfadprobleme mit React Router in React.js?

Img-Pfadauflösung in React.js

In React.js ist das src-Attribut des Es wird erwartet, dass das Element die URL des Bildes enthält. Es scheint jedoch, dass in einigen Fällen relative Pfade nicht korrekt aufgelöst werden, insbesondere im Kontext von React Router.

Beachten Sie die folgende Dateistruktur:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

In Datei1.jsx , wird der folgende Code verwendet, um ein Bild anzuzeigen:

localhost/details/2
<img src="../img/myImage.png" /> <!-- works -->

localhost/details/2/id
<img src="../img/myImage.png" /> <!-- doesn't work -->

Wie Sie beobachtet haben, funktioniert der relative Pfad im ersten Fall, im zweiten Fall jedoch nicht. Dies liegt daran, dass der relative Pfad anhand der URL und nicht anhand der Dateiarchitektur aufgelöst wird.

Um sicherzustellen, dass Bilder unabhängig von der Route korrekt angezeigt werden, besteht eine Lösung darin, die Bilder mit der folgenden Syntax zu importieren:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={&quot;logo&quot;}/> 
        )  
    }
}

Durch den Import des Bildes stellen Sie sicher, dass es sich um eine gebündelte Ressource handelt und in allen Komponenten verfügbar ist, unabhängig von der aktuellen Route.

Das obige ist der detaillierte Inhalt vonWie löse ich Bildpfadprobleme mit React Router in React.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!