reactjs - 如何在 React 中引用本地镜像？

Question

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

我有一个名为 one.jpeg 的图像在与我的组件相同的文件夹中，我尝试了 <img src="one.jpeg" />和<img src={"one.jpeg"} />在我的里面render功能正常，但是图像不显示。另外，我无权访问 webpack config文件，因为该项目是使用官方 create-react-app 创建的命令行实用程序。

更新:如果我首先使用 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} />

我推荐此选项，特别是如果您要重复使用图像源。