vue插件vue-lazyload懶加載插件的使用及在過程當中遇到的圖片不更新問題

當網絡請求比較慢的時候,提早給這張圖片添加一個像素比較低的佔位圖片，不至於堆疊在一塊，或顯示大片空白，讓用戶體驗更好一點。

1. 安裝插件：

npm install vue-lazyload --save-dev

2. main.js引入插件：

import VueLazyload from 'vue-lazyload' //引入這個懶加載插件

　Vue.use(VueLazyLoad,{
　　preLoad: 1.0, //圖片 設置顯示比例，默認爲1.3
　　error:require('./assets/img/weixin_error.jpg'),  //加載失敗的顯示
　　loading: require('./assets/img/logo.png'),       //加載中的顯示
　　attempt: 1
　})

配置圖片位置這裏，經過經常使用的路徑配置找不到圖片，因此我用的是require

具體的配置使用能夠參考：

https://www.npmjs.com/package/vue-lazyload

3.在組件任何地方均可以直接使用把 img 裏的:src -> v-lazy

<img v-lazy="圖片地址" :key="圖片地址">

注意>>>  ：key=""  必需要加，不然就會出現，頁面刷新，其餘內容都刷新了，可是隻有圖片不刷新的狀況