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