uni-app H5 realizes lazyload image lazy loading

Use npm to install vue-lazyload component

npm -i vue-lazyload -S

How to use Create a component myImage.vue under the components folder

<template>
	// 图片方式
	<!-- #ifdef APP-PLUS||MP-WEIXIN --> 
	<image  :lazy-load="true" :src="imgpath" 
	:style='{width:imgwidth,height:imgheight}'
	></image>  
	<!-- #endif -->  
	<!-- #ifdef H5 -->  
	<img  v-lazy="imgpath" >  
	<!-- #endif -->  
</block>  
</template>

<script>
	import Vue from 'vue'
	import VueLazyload from 'vue-lazyload'  
	Vue.use(VueLazyload)
	export default{
    
    
		// props:['imgpath']
		props:{
    
    
			imgpath:{
    
    
				type:String
			},
			imgwidth:{
    
    
				type:String,
				default:'100%'
			},
			imgheight:{
    
    
				type:String,
				default:'100%'
			}
		}
		
		
	}
</script>

<style>
	img{
    
    width: 100%;}
	/* .imgBox{width: 100%;height: 100%;} */
	/* .imageStyle{width: 100%!important;height: 100%!important;;display: block;} */
	img[lazy=loading] {
    
      
	    /*加载中*/  
	}  
	img[lazy=error] {
    
      
	    /*加载失败*/  
	}  
	img[lazy=loaded] {
    
      
	    /*加载完成*/  
	}
</style>

// 背景图方式
		<block v-for="(item,index) in list" :key="index">  
		<!-- #ifdef APP-PLUS -->  
		<image  :lazy-load="true" :src="item.img"></image>  
		<!-- #endif -->  
		<!-- #ifdef H5 -->  
		<view  v-lazy:background-image="{loading:'/static/loading.png',error:'/static/error.png',src:item.img}"></view>  				
		<!-- #endif -->  

Register in main.js global

import myImage from './components/myImage.vue'
Vue.component('my-image',myImage)

Instructions

<my-image :imgpath="imgUrl+item.content[0].img"></my-image>