React.js上img的正确路径

Question

我的React项目中的图片有问题。的确，我一直认为src属性的相对路径是建立在文件架构上的

这是我的文件架构：

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

但是我意识到路径是建立在URL上的。在我的一个组件中（例如到file1.jsx中），我有这个：

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

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

如何解决这个问题？我希望在react-router处理的任何形式的路由中，所有图像都可以使用相同的路径显示。

Answer 1

您使用的是相对网址，相对于当前网址，而不是文件系统。您可以使用绝对网址来解决此问题

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

但这不适用于您部署到www.my-domain.bike或任何其他站点的情况。最好使用相对于网站根目录的网址

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