ReactJS 和公用文件夹中的图像

javascript reactjs

2022-08-30 01:41:34

我是 ReactJS 中的新手，我想在组件中导入图像。这些图像位于公用文件夹内，我不知道如何从 react 组件访问该文件夹。

有什么想法吗？

编辑

我想在底部.js或标题中导入图像.js

结构文件夹为：

我不使用网络包。我应该吗？

编辑 2

我想使用webpack来加载图像和其他资产。所以在我的配置文件夹中，我有下一个文件：

我需要在哪里添加图像的路径以及如何添加？

谢谢

答案 1

您不需要任何 webpack 配置。

在您的组件中，只需提供图像路径。默认情况下，react 将知道它在公共目录中。

<img src="/image.jpg" alt="image" />

答案 2

要在公共场合引用图像，我知道有两种方法可以直接完成。一个是像上面的Homam Bahrani。

用

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />

既然这有效，你真的不需要其他任何东西，但是，这也有效......

    <img src={window.location.origin + '/yourPathHere.jpg'} />