• 方法一
  使用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>