1、src 和 :src
<swiper-slide v-for="item of swiperList" :key='item.id'>
<img :src="item.srcUrl" />
<!--<img v-bind:src="item.srcUrl" />-->
</swiper-slide>
图片循环的时候,要用 :src,是 v-bind:src 的简写形式。
![](https://img-blog.csdnimg.cn/20201031223618171.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laWNoYW9XZW4=,size_16,color_FFFFFF,t_70)
2、第一种情况:如果图片放在 src 文件夹下
![](https://img-blog.csdnimg.cn/20201031224251266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laWNoYW9XZW4=,size_16,color_FFFFFF,t_70)
require加载,require加载图片时可以使用相对地址
swiperList: [
{
srcUrl: require('@/assets/images/img1.jpg')
},
{
srcUrl: require('@/assets/images/img2.jpg')
},
{
srcUrl: require('@/assets/images/img3.jpg')
}
]
第二种情况:如果图片放在 static 文件夹下,循环时可以用绝对地址 ,因为 static 目录下的文件打包时不会被webpack处理。
![](https://img-blog.csdnimg.cn/20201031225508866.png)