vue-lazyload picture lazy loading plug-ins

A: install

cnpm install vue-lazyload -D

Two: main.js inlet references

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {   //参数设置
  preLoad: 1.3, 
  error: require('@/assets/error.jpg'),
  loading: require('@/assets/timg.gif'),
  attempt: 1
})

III: Component used: as long as the src can be changed to v-lazy

<template>
  <div class="hello">
    <img v-for="item in img" v-lazy="item" width="100" height="100">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      img:[
        require('@/assets/logo.png'),
        require('@/assets/logo.png'),
        require('@/assets/logo.png'),
      ]
    }
  }
}
</script>

Special Note: The image address references must use require (...)