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

Question

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

Answer 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} />

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