VUE图片懒加载vue-lazyload插件用法

引入

import VueLazyload from "vue-lazyload";

配置error、loading时的图片

import loading from "../src/assets/pubilcImg/loading.gif";
import error from "../src/assets/pubilcImg/error.png";
Vue.use(VueLazyload, {
  error: error,
  loading: loading
});
// 这样的引入也是可以的
Vue.use(VueLazyload, {
  error: require(../error.png),
  loading: require(../loading.gif)
});

文件中使用

<img v-lazy ="item.img"> // vue文件中将需要懒加载的图片:src 修改为 v-lazy 

各种样式修改

// 样式修改
 img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }

插件地址
https://github.com/hilongjw/vue-lazyload