如何从本地目录加载图像，并将其包含在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'}。
当前回答
你需要使用require和。默认的
<img src={require('./logo.jpeg').default} />
其他回答
为了让require方法工作，我必须添加".default"，就像这样:
<img src={require('./path/to/image.svg').default} />
import React from "react";
import image from './img/one.jpg';
class Image extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}
导出默认镜像
第一步:从“。/img/icon.png”导入MyIcon
第二步:
<img
src={MyIcon}
style={{width:'100%', height:'100%'}}
/>
好吧，你们现在都知道这个问题的答案了，但我把这个问题的答案贴出来，大多数人在阅读其他答案后可能会想知道:
问:我怎么导入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模式中)，但不是在我上面的情况下。
