Vue項目使用swiper做輪播圖時,異步調用數據時導致圖片不顯示

Vue使用swiper輪播圖懶加載注意事項

1. 如果是經常替換的圖片數據，最好不要使用swiper自帶的lazy，因爲會出現數據更新了，但是圖片不能更新的情況。因爲數據是綁定在data-src上的，但是頁面顯示的是src上的路徑，不能重新加載。
2. 使用vue-lazyload的時候注意在需要懶加載的圖片上綁定:key="src"，這樣就能很好的解決數據替換了，圖片不能替換的問題。
3. 在main.js中，使用全局加載圖的時候，可以使用require(‘路徑’)
4. 當然在單獨頁面也可以添加不同的加載動畫和error圖。

使用vue-lazy做懶加載

安裝 npm install vue-lazyload --save，在main.js中引入

import VueLazyLoad from 'vue-lazyload' // 懶加載

Vue.use(VueLazyLoad,{
  attempt: 1,
  error: require('../src/assets/images/icon/error.gif'),
  loading: require('../src/assets/images/icon/loading.gif')
})

使用

<img v-lazy="item" :key="item">

如果在頁面中有不一樣的加載圖的話可以使用

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>
<!-- 或者 -->
<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

可以參考官網vue-lazy