Vue.js图片lazyload插件实例有什么？

$ npm install vue-lazyload --save

//main.js

import Vue from 'vue'
// import VueLazyload
import VueLazyload from 'vue-lazyload'

//use custom directive
Vue.use(VueLazyload)

// use options
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1
})

new Vue({
 el: 'body',
})

<!--your.vue-->
<script>
export default {
 data () {
 return {
  list: [
  'your_images_url', 
  'your_images_url', 
  // you can customer any image's placeholder while loading or load failed
  {
   src: 'your_images_url.png',
   error: 'another-error.png',
   loading: 'another-loading-spin.svg'
  }
  ]
 }
 }
}
</script>

<template>
 <div class="img-list">
 <ul id="container">
  <li v-for="img in list">
  <img v-lazy="img">
  </li>
 </ul>
 </div>
</template>

<style>
 img[lazy=loading] {
 /*your style here*/
 }
 img[lazy=error] {
 /*your style here*/
 },
 img[lazy=loaded] {
 /*your style here*/
 }
 /*
 or background-image
 */
 .yourclass[lazy=loading] {
 /*your style here*/
 }
 .yourclass[lazy=error] {
 /*your style here*/
 },
 .yourclass[lazy=loaded] {
 /*your style here*/
 }
</style>