外掛地址：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 後面接上圖片地址就可以了。