如何从本地目录加载图像，并将其包含在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'}。
当前回答
首先用{}包装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} />
我推荐这个选项，特别是在重用映像源的情况下。
其他回答
有两种方法。
第一个
在类的顶部导入图像，然后在<img/>元素中引用它，如下所示
import React， {Component} import myImg from '../path/myImg.svg'; 导出默认类HelloImage扩展组件 呈现(){ return <img src={myImg} width="100" height="50" /> . return <img src={myImg} width="100 ｝ ｝
第二个
你可以直接在<img/>元素中使用require('../pathToImh/img')来指定图像路径
import React， {Component} 导出默认类HelloImage扩展组件 呈现(){ return <img src={require(../path/myImg.svg)} width="100" height="50" /> . return <img src={require(../path/myImg.svg) ｝ ｝
我通常喜欢把图片放在官方文档中推荐的公共文件夹中。
1. Put your image into public folder. e.g, public/images/image.png
2. use directly into <img>. E.g, <img src="images/image.png" />
由于它在公共文件夹中，它将直接使用这些图像。不需要导入。
你可以创建一个名为实例images.js的文件，并引用其中所有的应用资源，然后将该组件导入到其他需要显示图像的组件中
把你的图片放在公共文件夹中，或者在公共文件夹中创建一个子文件夹，把你的图片放在那里。 例如:
你把“complete -爬行。jpg”放在公共文件夹中，然后你可以访问它
src={'/completative-reptile.jpg'}
你把complete -爬行.jpg放在public/static/images，然后你可以访问它
src={'/static/images/completative-reptile.jpg'}
如果你不想把你的图片放在公共文件夹中，请使用下面的语法
src={require("../../assets/images/img_envelope.svg").default}
