Javascript 公共文件夹中的 ReactJS 和图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47196800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS and images in public folder
提问by Aceconhielo
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.
我是 ReactJS 的新手，我想在组件中导入图像。这些图像位于 public 文件夹内，我不知道如何从 react 组件访问该文件夹。
Any ideas ?
有任何想法吗 ？
EDIT
编辑
I want to import an image inside Bottom.js or Header.js
我想在 Bottom.js 或 Header.js 中导入图像
The structure folder is:
结构文件夹是：
I do not use webpack. Should I ?
我不使用 webpack。我是不是该 ？
Edit 2
编辑 2
I want to use webpack for loading the images and the rest of assets. So in my config folder I have the next files:
我想使用 webpack 加载图像和其余资产。所以在我的 config 文件夹中，我有以下文件：
Where I need to add the paths of the images and how?
我需要在哪里添加图像的路径以及如何添加？
Thanks
谢谢
采纳答案by Gerard
To reference images in public there are two ways I know how to do it straight forward. One is like above from Homam Bahrani.
要在公共场合引用图像，我知道有两种方法可以直接做到这一点。一个就像上面来自 Homam Bahrani 的一样。
using
使用
<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'} />
回答by Bimal Grg
You don't need any webpack configuration for this..
你不需要任何 webpack 配置。
In your component just give image path. By default react will know its in public directory.
在您的组件中，只需提供图像路径。默认情况下，react 会知道它在公共目录中。
<img src="/image.jpg" alt="image" />
回答by Homam Bahrani
回答by Hassan Ajaz
1- It's good if you use webpack for configurations but you can simply use image path and react will find out that that it's in public directory.
1- 如果您使用 webpack 进行配置，那很好，但是您可以简单地使用图像路径，然后反应会发现它在公共目录中。
<img src="/image.jpg">
2- If you want to use webpack which is a standard practice in React. You can use these rules in your webpack.config.dev.js file.
2- 如果您想使用 webpack，这是 React 中的标准做法。您可以在 webpack.config.dev.js 文件中使用这些规则。
module: {
rules: [
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
],
},
then you can import image file in react components and use it.
然后您可以在反应组件中导入图像文件并使用它。
import image from '../../public/images/logofooter.png'
<img src={image}/>
回答by Karthik Sagar
We know React is SPA. Everything is rendered from the root component by expanding to appropriate HTML from JSX.
我们知道 React 是 SPA。通过从 JSX 扩展到适当的 HTML，一切都是从根组件呈现的。
So it does not matter where you want to use the images. Best practice is to use an absolute path (with reference to public). Do not worry about relative paths.
因此，您想在何处使用图像并不重要。最佳实践是使用绝对路径（参考 public）。不要担心相对路径。
In your case, this should work everywhere:
在您的情况下，这应该适用于任何地方：
"./images/logofooter.png"
"./images/logofooter.png"
回答by Umesh
You should use webpack here to make your life easier. Add below rule in your config:
你应该在这里使用 webpack 来让你的生活更轻松。在您的配置中添加以下规则：
const srcPath = path.join(__dirname, '..', 'publicfolder')
const rules = []
const includePaths = [
srcPath
]
// handle images
rules.push({
test: /\.(png|gif|jpe?g|svg|ico)$/,
include: includePaths,
use: [{
loader: 'file-loader',
options: {
name: 'images/[name]-[hash].[ext]'
}
}
After this, you can simply import the images into your react components:
在此之后，您可以简单地将图像导入到您的 React 组件中：
import myImage from 'publicfolder/images/Image1.png'
Use myImage like below:
使用 myImage 如下：
<div><img src={myImage}/></div>
or if the image is imported into local state of component
或者如果图像被导入到组件的本地状态
<div><img src={this.state.myImage}/></div>
