我是 ReactJS 的新手，我想在组件中导入图像。这些图像位于 public 文件夹内，我不知道如何从 react 组件访问该文件夹。
有任何想法吗 ？
编辑
我想在 Bottom.js 或 Header.js 中导入图像
结构文件夹是：
我不使用 webpack。我是不是该 ？
编辑 2
我想使用 webpack 加载图像和其余资产。所以在我的 config 文件夹中，我有以下文件：
我需要在哪里添加图像的路径以及如何添加？
谢谢
公共文件夹中的 ReactJS 和图像
IT技术
javascript
reactjs
2021-02-08 06:32:17
6个回答
你不需要任何 webpack 配置。
在您的组件中，只需提供图像路径。默认情况下，react 会知道它在公共目录中。
<img src="/image.jpg" alt="image" />
要在公共场合引用图像，我知道有两种方法可以直接做到这一点。一个就像上面来自 Homam Bahrani 的一样。
使用
<img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />
既然这有效，你真的不需要其他任何东西，但是，这也有效......
<img src={window.location.origin + '/yourPathHere.jpg'} />
react 文档在文档中很好地解释了这一点，您必须使用process.env.PUBLIC_URL放置在公共文件夹中的图像。见这里获取更多信息
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
1- 如果您使用 webpack 进行配置，那很好，但您可以简单地使用图像路径，然后react会发现它在公共目录中。
<img src="/image.jpg">
2- 如果您想使用 webpack，这是 React 中的标准做法。您可以在 webpack.config.dev.js 文件中使用这些规则。
module: {
rules: [
{
test: /\.(jpe?g|gif|png|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 10000
}
}
]
}
],
},
然后您可以在react组件中导入图像文件并使用它。
import image from '../../public/images/logofooter.png'
<img src={image}/>
你应该在这里使用 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]'
}
}
在此之后，您可以简单地将图像导入到您的 React 组件中：
import myImage from 'publicfolder/images/Image1.png'
使用 myImage 如下：
<div><img src={myImage}/></div>
或者如果图像被导入到组件的本地状态
<div><img src={this.state.myImage}/></div>