ReactJS和公共文件夹中的图像 [英] ReactJS and images in public folder

问题描述

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

Im new in ReactJS and I want to import images in a component. These images are inside of the public folder and I do not know how to access the folder from the react component.

任何想法？

编辑

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

I want to import an image inside Bottom.js or Header.js

结构文件夹是：

我不使用webpack。我应该吗？

I do not use webpack. Should I ?

编辑2

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

I want to use webpack for loading the images and the rest of assets. So in my config folder I have the next files:

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

Where I need to add the paths of the images and how?

谢谢

推荐答案

要在公共场合引用图像，有两种方法我知道如何直接进行。
一个来自Homam Bahrani。

To reference images in public there are two ways I know how to do it straight forward. One is like above from Homam Bahrani.

使用

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

因为这样你真的不需要别的东西，但这也有效...... / p>

And since this works you really don't need anything else but, this also works...

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

这篇关于ReactJS和公共文件夹中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！