我是ReactJS的新手，我想在一个组件中导入图像。这些图像在公用文件夹内，我不知道如何从react组件访问文件夹。
有什么想法吗?
EDIT
我想在Bottom.js或Header.js中导入一个图像
结构文件夹为:
我不使用webpack。我应该吗?
编辑2
我想使用webpack来加载图像和其他资产。所以在我的配置文件夹中，我有下面的文件:
我需要在哪里添加图像的路径，如何添加?
谢谢
当前回答
你应该在这里使用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>
其他回答
简单地使用
<img src='/image.extension' />
React会自动指向公共目录
你应该在这里使用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>
一个简单的解决方案是使用这样的路径:/images/logoFooter.png。如果文件直接位于公用文件夹下，执行/someImage.png。你可以深入/x/y/z/image.png。将图像的定位部分视为该图像的绝对位置。
欲了解更多信息，请访问https://create-react-app.dev/docs/using-the-public-folder/。
在public ex.Assets中创建一个文件夹，把你的图像放在这个文件夹中，并在src中指定folder_name / image_name
<img src = "/Assets/cardimg.svg" alt="Card image cap" width="400" />
1-如果你使用webpack进行配置是很好的，但你可以简单地使用image path, 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}/>
