我是ReactJS的新手，我想在一个组件中导入图像。这些图像在公用文件夹内，我不知道如何从react组件访问文件夹。
有什么想法吗?
EDIT
我想在Bottom.js或Header.js中导入一个图像
结构文件夹为:
我不使用webpack。我应该吗?
编辑2
我想使用webpack来加载图像和其他资产。所以在我的配置文件夹中，我有下面的文件:
我需要在哪里添加图像的路径，如何添加?
谢谢
当前回答
简单地使用
<img src='/image.extension' />
React会自动指向公共目录
其他回答
简单地使用
<img src='/image.extension' />
React会自动指向公共目录
如果你想把你的javascript文件从公共文件夹添加到react，把特定的文件放在公共文件夹的index.html文件中。你的问题会解决的。
这里有三个简单的方法可以做到这一点。
你可以在目录中创建一个文件夹，然后像我们导入的方式一样访问它 你可以在SRC中直接给出图像名称 <img src="image__name" alt="yourpic" />
//默认情况下，公共文件夹中的react look可以在img标签中渲染图像
Const image = window.location.origin + "/image.png";
//如果你的图片在公共目录的imagecollection文件夹里面，你可以用这种方式导入它
const image = window.location.origin + "/imagecollection /image.png";
<img src={image} alt="yourpic" />
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}/>
我们知道React是SPA。所有内容都由根组件渲染 从JSX扩展到适当的HTML。
所以你想在哪里使用这些图像并不重要。最佳实践是使用绝对路径(参考public)。不担心相对吗 路径。
在你的例子中，这应该在任何地方都适用:
”。/图片/ logofooter.png”
