vue-lazyload

yarn add vue-lazyload

main.js

import VueLazyload from 'vue-lazyload';
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)
});

XXX.vue

 <div class="icon">
        <!-- :src='item.picUrl'  -->
        <img width="100" height="100" v-lazy="item.picUrl" />
      </div>

各种样式修改

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