小编典典

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

reactjs

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

我有一个名为图像one.jpeg相同的文件夹我的组件里面,我都尝试<img src="one.jpeg" /><img src={"one.jpeg"} />我的内部render功能,但图像显示不出来。另外,webpack config由于该项目是使用官方create-react-app命令行util 创建的,因此我无权访问文件。

更新:如果我首先导入图像import img from './one.jpeg'并在内部使用它img src={img},则此方法有效,但是我要导入的图像文件太多,因此,我想以形式使用它们img src={'image_name.jpeg'}


阅读 336

收藏
2020-07-22

共1个答案

小编典典

首先将src包装在 {}

然后,如果使用Webpack;代替: <img src={"./logo.jpeg"} />

您可能需要使用require:

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


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

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

要么 …

const logo = require('./logo.jpeg); // with require

然后插入…

<img src={logo} />

我建议您使用此选项,尤其是在您重新使用图像源的情况下。

2020-07-22