我的反应项目中的图像有一些问题。事实上,我一直认为 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 处理的任何形式的路由中,所有图像都可以使用相同的路径显示。
您使用的是相对 url,它相对于当前 url,而不是文件系统。您可以通过使用绝对网址来解决此问题
<img src ="http://localhost:3000/details/img/myImage.png" />
但是,当您部署到 www.my-domain.bike 或任何其他站点时,这并不好。最好使用相对于站点根目录的 url
<img src="/details/img/myImage.png" />