A brief discussion on the detailed process of vue-lazyload implementation

import 'VueLazyload' from 'vue-lazyload'
(VueLazyload,{
   preload:1.3,//Preloaded width and height   loading:"The path of the displayed image in the loading of img",
   error:"Path to the realistic picture when img loading fails",
   attempt:3,//Number of attempts to load   listenEvents:['scroll','wheel','mousewheel','resize','animationend','transitionend','touchmove'], //The event you want vue to listen to})

<img v-lazy=""/>

 data(){
  return {
   img:{
     src:"The picture is really a path"
        }
      }
    }

//


// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in  with an alias.
import Vue from 'vue'
import App from './App'
import $ from 'jquery'
import 'assets/bootstrap/css/'
import 'assets/bootstrap/js/'
import router from '@/router/index'
import VueLazyload from 'vue-lazyload'
(VueLazyload,{
  preload:1.3,
  loading:require('../static/imgs/'),
//Explain why it is require('......url'): Because vue comes with webpack packaging tool, if it is an image path, it will be parsed as a module, so just introduce it directly.//Remember to change the path inside to your own  listenEvents:['mousewheel'],
})
//Load vue-router//import Vue from 'vue'
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})


//


<template>
 <div >
  <navbar></navbar>
  <router-view></router-view>
  <hello></hello>
 <ul>
  <li v-for="item in imgUrl">
   <img v-lazy="" alt="" width="300" height="150"/>
  </li>
 </ul>
 <img v-lazy='img[0].src'/>
 </div>
</template>

<script>
  import hello from './components/Hello'
  import Navbar from '@/components/navBar'
  import route from '@/components/route'
export default {
 name: 'app',
 components:{
  hello,
  Navbar
 },
 data() {
  return {
   imgUrl: [
    {src: require('@/assets/imgs/')},//Remember to change the path inside to your own    {src: require('@/assets/imgs/')},//Remember to change the path inside to your own   ],
   img:[
    {src:require('@/assets/imgs/')}//Remember to change the path inside to your own   ]
  }
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
} 
</style>