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

问题描述

我是 ReactJS 的新手，我想在组件中导入图像.这些图像位于 public 文件夹内，我不知道如何从 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'} /> 

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

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

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

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