我的 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图像的相对路径中似乎不起作用。相反，您可以导入图像：
import logo from './logo.png' // relative path to image
class Nav extends Component {
render() {
return (
<img src={logo} alt={"logo"}/>
)
}
}
如果您使用 create-react-app 来创建您的项目，那么您的公共文件夹是可以访问的。因此，您需要将image文件夹添加到公用文件夹中。
公开/图片/
<img src="/images/logo.png" />
您使用的是相对 url，它是相对于当前 url 的，而不是文件系统。您可以通过使用绝对网址来解决此问题
<img src ="http://localhost:3000/details/img/myImage.png" />
但是当您部署到 www.my-domain.bike 或任何其他站点时，这并不是很好。最好使用相对于站点根目录的 url
<img src="/details/img/myImage.png" />
随着create-react-app有公共文件夹（与index.html的...）。如果你把你的“myImage.png”放在那里，比如在img子文件夹下，那么你可以通过以下方式访问它们：
<img src={window.location.origin + '/img/myImage.png'} />
在 src(/src/images) 中创建一个图像文件夹并将您的图像保存在其中。然后在您的组件中导入此图像（使用您的相对路径）。如下图——
import imageSrc from './images/image-name.jpg';
然后在您的组件中。
<img title="my-img" src={imageSrc} alt="my-img" />
另一种方法是将图像保存在公共文件夹中并使用相对路径导入它们。为此，在公共文件夹中创建一个图像文件夹并将您的图像保存在其中。然后在您的组件中使用它，如下所示。
<img title="my-img" src='/images/my-image.jpg' alt="my-img" />
两种方法都有效，但推荐第一种方法，因为它更简洁的方式和图像在构建时由 webpack 处理。