当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>