vue 图片懒加载插件

一, 安装

　　npm install  vue-lazyload --save-dev

二, main.js 引入文件

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  error: require('./assets/images/newdefault.png'),  //加载失败图片
  loading: require('./assets/images/newdefault.png'), // 加载中
　　// 图片路径的过滤器
  filter: {
    webp (listener, options) {
      if (!options.supportWebp) return
      if(!listener.src || listener.src.substr(0, 4) === 'http') return
      listener.src = 'http://xxxxxxxxx.cn/res/' + listener.src
    }
  }
})

三, 使用

<img v-lazy="data.picUrl" alt="" class="new-img">

//  背景图片
<div class="imgdiv" v-lazy:background-image="data.picUrl"></div>