当v-for遇到img标签-加载本地静态图片

约定：本地图片放在assets目录下

具体如下：

----assets
-----------img/*.png
----layouts
-----------test.vue

情况1. data中定义了图片的地址

注意点：

使用v-bind绑定

必须使用require引入图片路径

<ul>
    <li v-for="(item,index) in data.imgList" :key="index">
        <img :src="item.src" />
    </li>
</ul>

data(){
          return {
            imgList:[
              { src: require('../assets/img/1.png') },
            ]
          }
      }

情况2. 在img标签的src属性中动态拼接图片地址

注意点：

必须使用require引入图片路径

这个是动态拼接地址，可以实现随机图片

<ul>
    <li v-for="(item,index) in 10 " :key="index">
        <img :src="require('../assets/img/' + (index+1) + '.png')" />
    </li>
</ul>