约定:本地图片放在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>