如何结合插件 vue-lazyload 来简单实现图片懒加载？

插件地址：https://www.npmjs.com/package/vue-lazyload；

一、使用场景：

在项目中有很多条数的信息，且图片很多的时候，不需要一次把整个页面的图片都加载完，而是在滚动到出现在屏幕才去加载该图片的时候就可以用这个插件。

二、简单使用步骤：

1. 在项目里面 npm i vue-lazyload --save

2. 在vue-cli脚手架项目主入口 main.js中引入，并调用初始化

　　

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
    loading: require('_common/image/default.png'),  //还没加载出来的默认展示图片
    error: 'dist/error.png' // 图片出错展示的默认图片
})

3. 在组件中使用

<ul>
          <li v-for="(item,index2) in group.items" :key="index2" class="list-group-item" @click="selectItem(item)">
            <img class="avatar" v-lazy="item.avatar" alt="">
            <span class="name">{{item.name}}</span>
          </li>
        </ul>

使用属性 v-lazy 后面接上图片地址就可以了。