Detailed explanation of Vue lazyload picture lazy loading example

cnpm i vue-lazyload -S
or npm i vue-lazyload -S

import Vue from 'vue'
import App from './App'
import router from './router'
//【1】Import lazy loading import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload) //【1】Use lazy loading (choose 1 from the following sentence)
 
//【1】Use lazy loading and enter the global configuration, so there is no need to configure error pictures, etc. where used (choose 1 from 2)
// Vue.use(VueLazyload, {
// preLoad: 1.3, // loading time // error: 'dist/error.png', // display this image if image error occurs // loading: 'dist/loading.gif', // display this image during loading // attempt: 1 // default number of images loaded // })
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components:
        App
    }
})

<template>
    <div>
        <!--【2】Use lazy loading method v-lazy='xxx'-->
        <img v-lazy="imgUrl"/>
        <img v-lazy="imgObj" />
    </div>
</template>
<script>
     
export default{
    name:"lazy",
    data(){
        return {
        // [1] Define image error display, etc. (import images, if in js, must be required)
        imgObj: {
            preLoad: 1.3, //Loading time src: "http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg", //Real image error: require("../assets/error.jpg"), //If error occurs, display this image loading: require("../assets/loadingding.jpg"), //Display this image during loading attempt: 1, //Default number of images to load},
        imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" //Only add one line, that is, the real picture}
    }
}  
</script>
 
<style></style>