vue 图片懒加载v-lazy（转）

1. 安装插件

npm install vue-lazyload

2. 在入口文件中引入并使用

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直重复加载占位图
error: require('img/error.png') //加载失败图片
});

3. 修改图片显示方式为懒加载

<img class="image" v-lazy="image.url ? image.url:''" 
     :key="image.url? image.url : ''" alt=""> 
将:src属性改为v-lazy, :key为了防止刷新页面或图片更改时图片不更新