Vue.js组件通信Props实现图片组件懒加载控制与占位传递

Vue.js懒加载图片组件通过Props将加载控制权交予父组件，支持placeholder、fallback、lazy、threshold等属性，结合IntersectionObserver实现按需加载与视觉降级。

在 Vue.js 中借助 Props 构建图片懒加载组件时，关键是让父组件掌握“是否加载真实图片”的控制权，再通过 Props 传入占位图、加载失败兜底图和懒加载触发时机等重要信息，使图片组件保持无状态并可重复使用。

懒加载行为与视觉反馈：由 Props 设计界定

以下 Props 是构成健壮懒加载图片组件至少需要接收的内容：

• src：真实图片地址，只在触发加载后发起请求
• placeholder：可采用 SVG、小尺寸模糊图或 base64 灰色方块，作为加载中的占位图显示
• fallback：备用图在加载失败后出现，例如“图片丢失”图标
• lazy：是否开启 IntersectionObserver 懒加载由此布尔值决定（默认 true）
• threshold：进入视口多少即可触发，由 IntersectionObserver 的 threshold 值设定（如达到 10% 时取 0.1）
• alt：语义化描述，虽然不影响逻辑，但不可缺少

加载时机的 Props 控制：以 IntersectionObserver 完成懒加载逻辑

组件内部通过 onMounted 和 onBeforeUnmount 维护观察器生命周期。是否启动观察器取决于 props.lazy ；触发阈值由 props.threshold提供；元素进入视口之后，才会把 props.src 赋值给 <img> 的 src 属性。

需要注意：初始 <img> 的 src 应该设置成 props.placeholder，避免没有占位内容而直接出现空白；加载成功后自然完成切换，失败时则退回 props.fallback。

立即学习“前端免费学习笔记（深入）”；

灵活视觉降级依靠 Props：占位与错误图

占位图（placeholder）属于 UX 必选项，并非装饰；它能够采用内联 SVG 字符串、data URL，乃至URL等多种格式。同理，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()。