vue項目中圖片懶加載時出現的問題

項目中遇到一個問題，記錄一下，vue項目中前期沒有做圖片懶加載的時候，當圖片出現錯誤或者顯示路徑不對，我加了onerror事件進行錯誤監聽並添加一張默認的圖片，優化用戶體驗。

 

後期因爲圖片數量變多，所以加入了圖片懶加載，但在懶加載中掛載時只加了loading的圖片，沒有加error，所以導致頁面圖片未正常加載的地方出現默認圖片閃爍的現象，最後在掛載時加入error引入一張默認圖片就好了

 

vue圖片懶加載實現步驟：

1.安裝插件

npm install vue-lazyload --save-dev

2.main.js中引入，掛載

import Vuelazyload from 'vue-lazyload'

Vue.use(Vuelazyload, {

       error: require('../static/img/nonelive.png'),

       loading: require('../static/img/nonelive.png')

})

3.在渲染結構的地方把：src換成v-lazy即可

<img v-lazy="item.pictureUrl?item.pictureUrl:'../../../static/img/nonelive.png'" alt="圖片未顯示" onerror="this.src='../../../static/img/nonelive.png'">