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'  
上一篇:android 自定义加载动画控件


下一篇:Flex布局教程及属性速查