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

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

回答:

首先把 src 包进去{}

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

您可能需要使用要求:

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


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

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

或者 …

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

然后插上…

<img src={logo} />

我会推荐这个选项,尤其是在您重用图像源的情况下。

以上是 如何在 React 中引用本地图像? 的全部内容, 来源链接: www.h5w3.com/z/754536.html

回到顶部