如何从本地目录加载图像,并将其包含在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'}。


当前回答

正如一些人在评论中提到的,你可以把图片放在公共文件夹中。这在Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/的文档中也有解释

其他回答

我也遇到了同样的问题,经过研究,我通过将JSON数据放在JS中的常量中来解决这个问题,这样我就可以导入图像,并且只通知JSON对象中的导入。例子:

import imageImport from './image.png';

export const example = [
  {
    "name": "example",
    "image": imageImport
  }
]

<Image source={example.image}/>

你需要在{}中包装你的图像源路径

<img src={'path/to/one.jpeg'} />

如果使用webpack,你需要使用require

<img src={require('path/to/one.jpeg')} />

首先,您必须导入图像

import logo from './logo.jpeg'; // with import

然后插上电源……

<img src={logo} />

就是这样。

首先用{}包装src

如果使用Webpack; 而不是: <img src={"./logo.jpeg"} /> . quot

你可能需要使用require:

<img src={\ require(' logo.jpeg')} />


另一种选择是首先导入图像:

从'./logo.jpeg'导入logo;//导入

还是……

Const logo = require('./logo.jpeg');//使用require

然后插上电源……

<img src={logo} />

我推荐这个选项,特别是在重用映像源的情况下。

const photo = require(`../../uploads/images/${obj.photo}`).default;
...
<img src={photo} alt="user_photo" />