VueLazyLoad (Vue图片懒加载)组件使用随笔

1. cnpm或者npm安装

　cnpm i  vue-lazyload -S   #安装至develop中

　　或

    npm install vue-lazyload --save-dev

2. main.js中引入并配置参数

　比较常用的参数是图片加载错误（error）和预加载时显示的图片（loading）

　import VueLazyLoad from 'vue-lazyload'

　Vue.use(VueLazyLoad, {

　　error: './static/error.png'      　　// 图片路径错误时加载图片

　　loading: './static/loading.png'     //预加载图片

　})

3.在Vue文件中使用

　将Vue中的img图片绑定 v-bind：src 修改为 v-lazy

　例如:  <img class="demo_img" v-lazy="data.imgUrl">

 

踩坑：

　　懒加载中 loading  || error 设置不成功的原因

　　//  图片在assets中

　　loading: require('./assets/loading.gif)

　　//  图片在static中

　　loading: '../static/loading.gif'