React.js上img的正确路径
我的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处理的任何形式的路由中，所有图像都可以使用相同的路径显示。
第827篇《React.js上img的正确路径》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
一位朋友向我展示了如何执行以下操作：
当请求图像的文件（例如“ example.js”）在文件夹树结构中与文件夹“ images”处于同一级别时，“ ./”起作用。
如果您使用create-react-app创建项目，则可以访问您的公用文件夹。因此，您需要将image文件夹添加到公用文件夹中。
公众/图片/
<img src="/images/logo.png" />
I would recommend to use traditional relative path. You can use like this below in image. We can put anything in this public folder and can target this folder to access images , videos and so on... This setup is done by react itself.
For this keep your images in public folder. Like so...
And than in your jsx.
<img src="images/pitbull-mark.png" />
您使用的是相对网址，相对于当前网址，而不是文件系统。您可以使用绝对网址来解决此问题
<img src ="http://localhost:3000/details/img/myImage.png" />
但这不适用于您部署到www.my-domain.bike或任何其他站点的情况。最好使用相对于网站根目录的网址
<img src="/details/img/myImage.png" />
相似问题
问题类别
将徽标放在您的公共文件夹中，例如public / img / logo.png下，然后将公共文件夹称为％PUBLIC_URL％：
上面的％PUBLIC_URL％的使用将
public在构建期间替换为文件夹的URL 。publicHTML只能引用文件夹中的文件。与“ /img/logo.png”或“ logo.png”不同，“％PUBLIC_URL％/ img / logo.png”将与客户端路由和非根公共URL一起正常工作。了解如何通过运行来配置非根公共URL
npm run build。