图片懒加载v-lazy的使用图片懒加载指令v-lazy的使用图片懒加载指令v-lazy的使用图片懒加载指令v-lazy的

安装v-lazy

yarn add vue-lazyload@1.3.3

如果vue-cli是5.0版本，安装最新的vue-lazyload3.0版本，运行的时候会提示版本不兼容，所以安装的1.3.3版本

引用

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preload: 1.3, // 表示lazyload元素距离底部距离百分比
  loading: require('./assets/imgs/xxx.svg'), // 正在加载时显示的图片路径
  error: require('./assets/imgs/xxx.svg'), // 图片加载失败时显示的图片路径
  attempt: 5, // 图片加载失败后重试次数，默认3
})

使用

<img :src="item.Img" />  
更换为
<img v-lazy="item.img"/>

更改loading图片或者error图片的样式

img[lazy="loading"]{
  display:block;
  width:50px !important;
  height:50px !important;
  margin:0 auto;
  }
img[lazy="error"]{
  display:block;
  object-fit: cover;
  }