vue3实现图片懒加载vue3-lazy

图片懒加载（Lazy Loading）是一种延迟加载图片的技术，它只有在图片即将进入浏览器可视区域时才加载图片，从而减少页面初始加载时间和提高页面加载性能。

图片懒加载的作用和好处如下：

提高页面加载速度：只有当图片即将显示在用户的屏幕上时才加载图片，可以减少页面初始加载时间和提高页面加载性能。
减轻服务器压力：只有在需要加载图片时才向服务器请求图片，可以减轻服务器的负载，提高网站的可用性。
节省带宽：只有在需要加载图片时才向用户发送图片数据，可以节省带宽和流量，降低用户的网络费用。
改善用户体验：用户不必等待所有图片加载完成才能看到页面内容，可以提高用户的满意度和用户体验。
总之，图片懒加载可以提高网站性能和用户体验，是一种非常有用的网页开发技术。

vue3中使用图片懒加载可以引用一款插件vue3-lazy
1、vue3 安装 vue-lazy

安装命令：npm install vue3-lazy -S

2、在main.js里面全局注册

import { createApp } from 'vue'
import App from './App.vue'
import VueLazyLoad from 'vue3-lazy'

createApp(App).use(VueLazyLoad, {
  loading: require('@/assets/images/default.png'), // 图片加载时默认图片
  error: require('@/assets/default.png') // 图片加载失败时默认图片
  // 还可以有其他配置
})

3、template中使用

<div id="app">
    <img v-lazy="../xxx.png">
</div>

******----注意：v-lazy不需要冒号 :v-lazy是错误的