公共文件夹中的 ReactJS 和图像

Question

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

有任何想法吗 ？

编辑

我想在 Bottom.js 或 Header.js 中导入图像

结构文件夹为：

我不使用 webpack。我是不是该 ？

编辑 2

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

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

谢谢

原文由 Aceconhielo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要在公共场合引用图像，我知道有两种方法可以直接进行。

一个就像上面来自 Homam Bahrani 的一样。

使用

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

而且由于这有效，您真的不需要任何其他东西，但是，这也有效……

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

原文由 Gerard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您不需要为此进行任何 webpack 配置。

在您的组件中，只需提供图像路径。 React 会知道它在公共目录中。

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

原文由 Bimal Grg 发布，翻译遵循 CC BY-SA 4.0 许可协议