如何从本地目录加载图像，并将其包含在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 React, { Component } from 'react';
// image import
import CartIcon from '../images/CartIcon.png';
class App extends Component {
render() {
return (
<div>
//Call image in source like this
<img src={CartIcon}/>
</div>
);
}
}
其他回答
我也遇到了同样的问题，经过研究，我通过将JSON数据放在JS中的常量中来解决这个问题，这样我就可以导入图像，并且只通知JSON对象中的导入。例子:
import imageImport from './image.png';
export const example = [
{
"name": "example",
"image": imageImport
}
]
<Image source={example.image}/>
首先，您必须导入图像
import logo from './logo.jpeg'; // with import
然后插上电源……
<img src={logo} />
就是这样。
你需要在{}中包装你的图像源路径
<img src={'path/to/one.jpeg'} />
如果使用webpack，你需要使用require
<img src={require('path/to/one.jpeg')} />
import image from './img/one.jpg';
class Icons extends React.Component{
render(){
return(
<img className='profile-image' alt='icon' src={image}/>
);
}
}
export default Icons;
好吧，你们现在都知道这个问题的答案了，但我把这个问题的答案贴出来，大多数人在阅读其他答案后可能会想知道:
问:我怎么导入50或100个文件:)
答:我建议你制作一个api (.json)文件，并在其中放入所有图像的链接并调用api。 这是迄今为止最容易批量导入文件的方法，尽管这将花费一些时间和知识，如果你还不知道。
