如何从本地目录加载图像，并将其包含在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'}。
当前回答
我想导入多个图像并将它们传递给不同的组件。结果证明，我只需要一次导入多个图像，并且可以通过传递道具在任何组件中使用它们。
import whiskey from './img/whiskey.jpg';
import hazel from './img/hazel.jpg';
import tubby from './img/tubby.jpg';
让我们创建一个对象。
dog = [
{ name: "Whiskey", src: whiskey },
// ...
]
然后显示图像
<img src={dog.src}></img>
其他回答
我的回答基本上和Rubzen的非常相似。顺便说一句，我使用图像作为对象值。 有两个版本适合我:
{
"name": "Silver Card",
"logo": require('./golden-card.png'),
or
const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,
没有包装，但这也是不同的应用。
我也检查了“导入”解决方案，在少数情况下它是有效的(这并不奇怪，这是应用在React中的App.js模式中)，但不是在我上面的情况下。
如果你不想把你的图片放在公共文件夹中，请使用下面的语法
src={require("../../assets/images/img_envelope.svg").default}
你需要在{}中包装你的图像源路径
<img src={'path/to/one.jpeg'} />
如果使用webpack，你需要使用require
<img src={require('path/to/one.jpeg')} />
把你的图片放在公共文件夹中，或者在公共文件夹中创建一个子文件夹，把你的图片放在那里。 例如:
你把“complete -爬行。jpg”放在公共文件夹中，然后你可以访问它
src={'/completative-reptile.jpg'}
你把complete -爬行.jpg放在public/static/images，然后你可以访问它
src={'/static/images/completative-reptile.jpg'}
你需要使用require和。默认的
<img src={require('./logo.jpeg').default} />
