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


当前回答

在公共文件夹内创建一个资产文件夹,并相应地放置图像路径。

<img className="img-fluid" 
     src={`${process.env.PUBLIC_URL}/assets/images/uc-white.png`} 
     alt="logo"/>

其他回答

把你的图片放在公共文件夹中,或者在公共文件夹中创建一个子文件夹,把你的图片放在那里。 例如:

你把“complete -爬行。jpg”放在公共文件夹中,然后你可以访问它

src={'/completative-reptile.jpg'}

你把complete -爬行.jpg放在public/static/images,然后你可以访问它

src={'/static/images/completative-reptile.jpg'}

为了让require方法工作,我必须添加".default",就像这样:

<img src={require('./path/to/image.svg').default} />

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

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

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

你需要在{}中包装你的图像源路径

<img src={'path/to/one.jpeg'} />

如果使用webpack,你需要使用require

<img src={require('path/to/one.jpeg')} />

第一步:从“。/img/icon.png”导入MyIcon

第二步:

<img
    src={MyIcon}
    style={{width:'100%', height:'100%'}}
/>