我是ReactJS的新手，我想在一个组件中导入图像。这些图像在公用文件夹内，我不知道如何从react组件访问文件夹。
有什么想法吗?
EDIT
我想在Bottom.js或Header.js中导入一个图像
结构文件夹为:
我不使用webpack。我应该吗?
编辑2
我想使用webpack来加载图像和其他资产。所以在我的配置文件夹中，我有下面的文件:
我需要在哪里添加图像的路径，如何添加?
谢谢
当前回答
如果你想把你的javascript文件从公共文件夹添加到react，把特定的文件放在公共文件夹的index.html文件中。你的问题会解决的。
其他回答
我们知道React是SPA。所有内容都由根组件渲染 从JSX扩展到适当的HTML。
所以你想在哪里使用这些图像并不重要。最佳实践是使用绝对路径(参考public)。不担心相对吗 路径。
在你的例子中，这应该在任何地方都适用:
”。/图片/ logofooter.png”
试试这个简单易行的方法
不要在src中创建Image文件夹。 在公共场所制作一个图像文件夹。 你工作在反应引导安装
NPM安装反应引导 import React from 导入“引导/ dist / css / bootstrap.min.css”; import {Image} from 'react-bootstrap'; 导出默认函数Main() { 回报( <> <Image src="/img/ Image .jpg/100px250" alt="bg Image " fluid /> . </> ） ｝
希望它已经完成了
你不需要任何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'} />
你应该在这里使用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>
