我在我的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，所有的图像可以显示相同的路径。
当前回答
如果你使用create-react-app来创建项目，那么你的公共文件夹是可访问的。所以你需要在公共文件夹中添加你的图像文件夹。
公共/图像/
<img src=“/images/logo.png” />
其他回答
在create-react-app中有一个公共文件夹(index.html…) 如果你把“myImage.png”放在img子文件夹下，你可以通过以下方式访问:
<img src={window.location.origin + '/img/myImage.png'} />
如果图像放在src文件夹中，请使用以下方法:
<img src={require('../logo.png')} alt="logo" className="brand-logo"/>
将logo放在公共文件夹中，例如public/img/logo.png，然后引用公共文件夹为%PUBLIC_URL%:
<img src="%PUBLIC_URL%/img/logo.png"/>
在构建过程中，上面的%PUBLIC_URL%的使用将被公用文件夹的URL取代。只有公共文件夹中的文件才能从HTML中引用。
与"/img/logo.png"或"logo.png"不同，"%PUBLIC_URL%/img/logo.png"将正确地用于客户端路由和非根公共URL。学习如何通过运行npm run build配置一个非根公共URL。
如果你的页面url包含多个/，那么在src中返回/ count - 1次。
例如页面url http://localhost:3000/play/game/，那么src url必须是../your-image-folder/image-name。你的your-image文件夹必须在公共文件夹中。
一位朋友向我展示了如何做到这一点:
"．当请求图像的文件(例如，"example.js")在文件夹树结构中与文件夹"images"在同一层时，/"工作。
