Vue-lazyload（按需加载图片）

1.开发一个较大项目的时候，难免需要加载很多图片，但如果全部加载出来就会使性能降低
并且当用户只看到一部分而不需要后面的图片的时候，就会浪费性能资源
2.可以使用vue-lazyload按需加载

1.安装vue-lazyload

m i vue-lazyload -S

2.配置main.js

import VueLazyload from "vue-lazyload";

Vue.use(VueLazyload, {
  // 可以通过配置loading来设置图片还未加载好之前的占位图片
  loading: require('./assets/images/loading.png')
})

3.使用vue-lazyload
把src换成v-lazy

  //<img src="图片的地址" alt=""> 
 <img v-lazy="图片的地址" alt="">