- 方法一
使用import 方法：
import imgUrl from "../../images/main.jpg"
<img src={imgUrl}/>
- 方式二
使用require方法
<img src = {require("../../images/main.jpg")} />
注意：require中只能是字符串，不能是变量
以上方法用于引入图片较少的情况．
当图片多的情况下，假设需要从数据库中读取图片的路径，require不能写变量，import from后面也不能写变量，那么该怎么办呢？
- 方法一
如数据已知，定义在本地
let data = {
"success":"true",
"data":[
{
"id":1,
"img_url":"/bg1.jpg"
},
{
"id":2,
"img_url":"/bg2.jpg"
},
]
};
export default data;
修改本地图片的引入地址，在require中使用字符串拼接
<List
dataSource = {data.data}
loading = {false}
renderItem = {(item) =>(<List.Item>
<List.Item.Meta
avatar={<Avatar src=require('../../images'+item.img_url)}/>}
title ={item.title}
/>
</List.Item>)}
>
</List>
