vue.js之vue-cli图片懒加载

首先，安装vue-lazyload

 npm install vue-lazyload -D

然后，在src/main.js中引入

 //注意Vue.use(VueLazyload,{})在import VueLazyload的前面，否则无法使用
 Vue.use(VueLazyload, {
   preLoad: 1.3,
   //错误时显示的图片
   error: '../static/image/error.jpg',
   //图片加载中显示的图片
   loading: '../static/image/loading.gif',
   attempt: 1
 })
import VueLazyload from 'vue-lazyload'

最后，在组件中使用

 //将img的src换成v-lazy就行
 <ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>