Vue中使用图片懒加载

步骤：

1、在index.html中引入：<script src="https://cdn.bootcdn.net/ajax/libs/vue-lazyload/1.3.3/vue-lazyload.js"></script>

2、在main.js中：

Vue.use(VueLazyload, {

  loading: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',

  attempt: 6 //尝试加载 6 张图片

})

也可直接使用，不做其他配置：

Vue.use(VueLazyload)

 

3、在想要用的地方使用即可

<img class="item-pic" v-for="url in urls" :key="url" v-lazy="url" height="500" width="500" />

 

4、调图片的api地址：https://picsum.photos/