vue实现图片懒加载

vue-lazyload

1.下载方式

通过npm的方法下载到自己的项目里
npm i vue-lazyload -S

2.在main.js里引入

import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)

还可以在使用VueLazyload相关的属性

Vue.use(VueLazyload, {
  error: 'dist/error.png', //图片未能加载出来的时候显示
  loading: 'dist/loading.gif',//图片正在加载时候显示
})

标准用法

//v-lazy里是变量的时候
<img v-lazy="img1">
//v-lazy里是字符的时候
<img v-lazy="'./../images/img1'"> //需要在字符外套一层单引号