Vue.js懒加载图片组件通过Props将加载控制权交予父组件，支持placeholder、fallback、lazy、threshold等属性，结合IntersectionObserver实现按需加载与视觉降级。
Vue.js 中通过 Props 实现图片懒加载组件，核心在于把「是否加载真实图片」的控制权交给父组件，同时用 Props 传递占位图、加载失败兜底图、懒加载触发时机等关键信息，让图片组件保持无状态、可复用。
Props 设计：明确懒加载行为与视觉反馈
一个健壮的懒加载图片组件应至少接收以下 Props：
- src：真实图片地址（触发加载后才请求）
- placeholder：加载中显示的占位图（如 base64 灰色方块、SVG 或小尺寸模糊图）
- fallback：加载失败时显示的备用图（如“图片丢失”图标）
- lazy：布尔值，控制是否启用 IntersectionObserver 懒加载（默认 true）
- threshold：IntersectionObserver 的 threshold 值（如 0.1 表示进入视口 10% 即触发）
- alt：语义化描述，不影响逻辑但不可少
懒加载逻辑：用 IntersectionObserver + Props 控制加载时机
在组件内部，通过 onMounted 和 onBeforeUnmount 管理观察器生命周期。是否启动观察器由 props.lazy 决定；触发阈值来自 props.threshold；真正发起图片加载则是在元素进入视口后，将 props.src 赋给 <img> 的 src 属性。
注意：初始 <img> 的 src 应设为 props.placeholder，避免无占位直接空白；加载成功后自然切换，失败则回退到 props.fallback。
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
占位与错误图：用 Props 实现灵活视觉降级
占位图（placeholder）不是装饰，而是 UX 必选项。它应支持多种格式：URL、data URL、甚至内联 SVG 字符串。同理，fallback 也应允许传入任意有效图像源。组件内部不做资源校验，只做安全渲染——例如用 v-if 切换不同 <img> 或配合 CSS background-image。
示例传值方式：
<LazyImage :src="'/api/photo.jpg'" :placeholder="'data:image/svg+xml,%3Csvg...'" :fallback="'/assets/image-error.png'" :threshold="0.05" />
响应式增强：监听 src 变更并重置状态
当父组件动态更新 src（比如图片列表滚动切换），组件需响应变化：清空当前 <img> 的 src，重置为 placeholder，并重新注册 IntersectionObserver（如果已销毁）。可通过 watch 监听 props.src，结合 isIntersecting 状态判断是否需立即尝试加载（例如新图片已在视口内）。
避免常见陷阱：不手动调用 observer.unobserve() 就重复 observe() 会报错；也不应在未挂载时调用 observe()。
