React.js 上 img 的正确路径

Question

我的反应项目中的图像有一些问题。事实上，我一直认为 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 处理的任何形式的路由中，所有图像都可以使用相同的路径显示。

原文由 onedkr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

原文由 prekolna 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 create-react-app 图像的相对路径似乎不起作用。相反，您可以导入图像：

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

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

原文由 claireablani 发布，翻译遵循 CC BY-SA 4.0 许可协议