Korrigieren Sie den Bildpfad in React.js

Question

Ich habe einige Probleme mit Bildern in meinem React-Projekt. Tatsächlich dachte ich immer, dass der relative Pfad im src-Attribut auf der Grundlage des Schemas der Datei erstellt wurde.

Das ist meine Dateistruktur:

components
    file1.jsx
    file2.jsx
    file3.jsx
Container
Bild
js
...

Mir ist jedoch aufgefallen, dass der Pfad auf der Grundlage der URL erstellt wird. In einer meiner Komponenten (z. B. file1.jsx) habe ich den folgenden Code:

localhost/details/2
<img src="../img/myImage.png" /> funktioniert normal

localhost/details/2/id
<img src="../img/myImage.png" /> funktioniert nicht, das Bild kann nicht angezeigt werden

Wie kann dieses Problem gelöst werden? Ich möchte, dass alle Bilder in jedem vom React-Router verarbeiteten Routing-Formular mit demselben Pfad angezeigt werden.

Answer 1

在create-react-app中，似乎无法使用相对路径来引用图片。相反，你可以使用import来引入图片：

import logo from './logo.png' // 图片的相对路径

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

Answer 2

您正在使用相对URL，它是相对于当前URL而不是文件系统的。您可以通过使用绝对URL来解决此问题

<img src ="http://localhost:3000/details/img/myImage.png" />

但是，当您部署到www.my-domain.bike或任何其他站点时，这并不理想。更好的方法是使用相对于站点根目录的URL

<img src="/details/img/myImage.png" />