Vue图片懒加载(Vue-Lazyload)

Vue-Lazyload使用记录

1、安装

npm install vue-lazyload --save

2、注册

在main.js中进行配置

import Vue from  vue 
import VueLazyload from  vue-lazyload 

Vue.use(VueLazyload, {
  preLoad: 1.3,
  //图片加载失败显示的图片
  error: require( assets/img/load/error.png ),
  //图片正在加载时显示的图片
  loading: require( assets/img/load/loading.gif ),
  attempt: 1
})

3、引用

img标签中的:src= … 替换成v-lazy= … ，如下所示：

<img v-lazy="information.image" >