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

其他回答

首先,您必须导入图像

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

然后插上电源……

<img src={logo} />

就是这样。

好吧,你们现在都知道这个问题的答案了,但我把这个问题的答案贴出来,大多数人在阅读其他答案后可能会想知道:

问:我怎么导入50或100个文件:)

答:我建议你制作一个api (.json)文件,并在其中放入所有图像的链接并调用api。 这是迄今为止最容易批量导入文件的方法,尽管这将花费一些时间和知识,如果你还不知道。

我的回答基本上和Rubzen的非常相似。顺便说一句,我使用图像作为对象值。 有两个版本适合我:

{
"name": "Silver Card",
"logo": require('./golden-card.png'),

or

const goldenCard = require('./golden-card.png');
{ "name": "Silver Card",
"logo": goldenCard,

没有包装,但这也是不同的应用。

我也检查了“导入”解决方案,在少数情况下它是有效的(这并不奇怪,这是应用在React中的App.js模式中),但不是在我上面的情况下。

正如一些人在评论中提到的,你可以把图片放在公共文件夹中。这在Create-React-App: https://create-react-app.dev/docs/using-the-public-folder/的文档中也有解释

你可以创建一个名为实例images.js的文件,并引用其中所有的应用资源,然后将该组件导入到其他需要显示图像的组件中