如何在React中引用本地映像?

如何从本地目录加载图像并将其包含在reactjs img src标记中

我的组件所在的文件夹中有一个名为one.jpeg的图像,我尝试了这两个<img src=”https://stackoverflow.com/questions/39999367/one.jpeg“/&gt和<img src={“one.jpeg”}/&gt在我的渲染函数中,但图像不显示。此外,我没有访问webpack config文件的权限,因为项目是使用官方create react app命令行util创建的

更新:如果我首先使用import img from./one.jpeg'导入图像,并在img src={img}中使用它,这是可行的,但是我有太多的图像文件要导入,因此,我想以img src={image\u name.jpeg}的形式使用它们

首先,在{}

如果使用网页包;
而不是:
<img src={“/logo.jpeg”}/&gt

您可能需要使用以下命令:

<img src={require('./logo.jpeg')}/&gt


另一个选项是首先导入图像,如下所示:

从“./logo.jpeg”导入徽标;//使用导入

或者

const logo=require('./logo.jpeg);//需要时

然后把它插上

<img src={logo}/&gt

我建议使用此选项,尤其是在重用图像源时

发表评论