1.
引入图片:import imgUrl from ‘…/src/a.jpg’,
render() {
return (
<div >
<img src={imgUrl } />
</div>
);
}
2.
利用webpack:
render() {
return (
<div >
<img src={require('../src/img/a.jpg')} />
</div>
);
}
需要注意的是前两种方式只能通过绝对路径来引入图片
3,当需要用axios动态获取本地图片的src时,必须使用绝对路径,在create-react-app项目中绝对路径访问的是public目录下的文件,所以avatar1.jpg直接放在public下面就可以了
json如下:
{
"success": "true",
"data": [{
"id": "1",
"date": "Feb 24,2019",
"imgUrl": "/avatar1.jpg"
}]
}
拿到路径之后可以这样使用(结合了redux):
render() {
return (
<div >
<img src={this.props.imgUrl } />
</div>
);
}