我在我的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，所有的图像可以显示相同的路径。
当前回答
一位朋友向我展示了如何做到这一点:
"．当请求图像的文件(例如，"example.js")在文件夹树结构中与文件夹"images"在同一层时，/"工作。
其他回答
根据webpack.config.js的官方使用指令，添加文件加载器npm，如下所示:
config.module.rules.push(
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
);
为我工作。
在create-react-app中，图像的相对路径似乎不起作用。相反，你可以导入一个图像:
import logo from './logo.png' // relative path to image
class Nav extends Component {
render() {
return (
<img src={logo} alt={"logo"}/>
)
}
}
您使用的是相对url，相对于当前url，而不是文件系统。你可以通过使用绝对url来解决这个问题
<img src ="http://localhost:3000/details/img/myImage.png" />
但是当您部署到www.my-domain.bike或任何其他站点时，这不是很好。更好的方法是使用相对于站点根目录的url
<img src=“/细节/img/myImage.png”/>
一位朋友向我展示了如何做到这一点:
"．当请求图像的文件(例如，"example.js")在文件夹树结构中与文件夹"images"在同一层时，/"工作。
在create-react-app中有一个公共文件夹(index.html…) 如果你把“myImage.png”放在img子文件夹下，你可以通过以下方式访问:
<img src={window.location.origin + '/img/myImage.png'} />
