图片懒加载（Lazy Loading）是一种延迟加载图片的技术，它只有在图片即将进入浏览器可视区域时才加载图片，从而减少页面初始加载时间和提高页面加载性能。
图片懒加载的作用和好处如下：
- 提高页面加载速度：只有当图片即将显示在用户的屏幕上时才加载图片，可以减少页面初始加载时间和提高页面加载性能。
- 减轻服务器压力：只有在需要加载图片时才向服务器请求图片，可以减轻服务器的负载，提高网站的可用性。
- 节省带宽：只有在需要加载图片时才向用户发送图片数据，可以节省带宽和流量，降低用户的网络费用。
- 改善用户体验：用户不必等待所有图片加载完成才能看到页面内容，可以提高用户的满意度和用户体验。
总之，图片懒加载可以提高网站性能和用户体验，是一种非常有用的网页开发技术。
vue3中使用图片懒加载可以引用一款插件vue3-lazy安装命令：npm install vue3-lazy -S
配置项介绍：
error 配置 加载失败时图像的src ，默认data数据-src路径，string类型。
loading 配置 加载中图像的src ，默认data数据-src路径，string类型。
main.ts文件：import { createApp } from 'vue'
import App from './app'
import lazyPlugin from 'vue3-lazy'
const app = createApp(App)
// 方式1
lazyPlugin.install(app, {
loading: 'loading.gif', // png/git/jpg/等格式都可以和你存放的图片格式一样就行
error: 'error.gif'
})
// 方式2
// app
// .use(lazyPlugin, {
// loading: 'loading.gif',
// error: 'error.gif',
// })
// .mount('#app')
app.mount('#app')public文件夹下存放两张图片：
这是我用的error.gif图片
这是我用的loading.gif图片
