vue2 中使用vue-lazyload做图片懒加载

安装插件

注意：以下图片只可以使用 url 图片，本地图片加载不出

npm install vue-lazyload -S

main.js 里引入并使用 具体配置可以看官方文档

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'http://tc.qdscitech.net/images/2021/06/17/404.jpg', //加载出错时显示的图片
  loading: 'http://tc.qdscitech.net/images/2021/06/17/loading.gif', //加载中显示的图片
  attempt: 1
})

组件中直接使用

以前：
<img src="http://tc.qdscitech.net/images/2021/06/17/404.jpg"></img>
或
<img src="@/assets/img/404.jpg"></img>
懒加载：
<img v-lazy="'http://tc.qdscitech.net/images/2021/06/17/404.jpg'"></img>