vue2和3图片懒加载

vue2

1, 安装图片懒加载模块

	cnpm install vue-lazyload --save

2, 在main.js入口文件中引入图片懒加载模块

	import VueLazyLoad from 'vue-lazyload'
	Vue.use(VueLazyLoad,{
  		loading: require("@/assets/holder.png")
//holder.png 注意换成assert里面有的图片名字
	})

3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可

<img v-lazy=" " alt="">

vue3

1, 安装图片懒加载模块

	cnpm install vue3-lazy --save

2, 在main.js入口文件中引入图片懒加载模块

import VueLazyLoad from 'vue3-lazy' 
	createApp(App).use(VueLazyLoad,{
  		loading: require("@/assets/holder.png")
	})

3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可

<img v-lazy="roomData.room_src" alt="">