如何从本地目录加载图像，并将其包含在reactjs img src标签中?
我有一个图像称为one.jpeg在相同的文件夹内作为我的组件，我尝试了<img src="one.jpeg" />和<img src={"one.jpeg"} />在我的renderfunction，但图像不显示。此外，我无法访问webpack配置文件，因为该项目是用官方的create-react-app命令行util创建的。
更新:如果我首先导入图像与导入img从'./one.jpeg'和使用它在img src={img}，但我有这么多的图像文件导入，因此，我想使用他们的形式，img src={'image_name.jpeg'}。
当前回答
首先，您必须导入图像
import logo from './logo.jpeg'; // with import
然后插上电源……
<img src={logo} />
就是这样。
其他回答
我的回答基本上和Rubzen的非常相似。顺便说一句，我使用图像作为对象值。 有两个版本适合我:
{
"name": "Silver Card",
"logo": require('./golden-card.png'),
or
const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,
没有包装，但这也是不同的应用。
我也检查了“导入”解决方案，在少数情况下它是有效的(这并不奇怪，这是应用在React中的App.js模式中)，但不是在我上面的情况下。
正如一些人在评论中提到的，你可以把图片放在公共文件夹中。这在Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/的文档中也有解释
实际上，我刚刚遇到了同样的问题，如果你把你的图像文件从。/public目录移动到。/src目录，你可以导入或要求，都将呈现。
我还在组件中测试了图像和src属性，它们都可以工作。
在我尝试使用。我得到了一个可用的错误，让我可以很容易地修复。
电脑很好心地给了我一条有用的错误信息。
我用过这种方法，它很有效……希望你有用。
const logofooter = require('../../project-files/images/logo.png');
return(
<div className="blockquote text-center">
<img src={logofooter} width="100" height="80" />
<div/>
);
我找到了另一种方法来实现这个(这是一个功能组件):
const Image = ({icon}) => {
const Img = require(`./path_to_your_file/${icon}.svg`).ReactComponent;
return <Img />
}
希望能有所帮助!
