核心是父组件控制加载并用Props传递占位图、失败图及触发时机，使图片组件无状态可复用；Props需包含src、placeholder、fallback、lazy、threshold、alt及宽高约束，结合IntersectionObserver实现精准懒加载与视觉降级。
核心是把加载控制权交给父组件，同时用 Props 传递占位图、失败图和触发时机等关键信息，让图片组件保持无状态、可复用。
Props 设计：明确懒加载行为与视觉反馈
一个实用的懒加载图片组件至少应接收以下 Props：
-
src：真实图片地址，仅在进入视口后才赋值给
<img>的src，避免提前请求 -
placeholder：加载中显示的占位图，支持 URL、base64 或内联 SVG（如
"data:image/svg+xml,%3Csvg..."），确保初始渲染不空白 - fallback：加载失败时显示的备用图，同样支持任意有效图像源，提升容错体验
-
lazy：布尔值开关，决定是否启用 IntersectionObserver，默认为
true -
threshold：IntersectionObserver 的触发阈值（如
0.1表示进入视口 10% 即加载），便于调节提前量 - alt：语义化描述，不可省略，保障可访问性
占位图必须“固定尺寸”，否则会引发布局偏移
普通懒加载常因图片尺寸未知导致加载完成时页面跳动。解决方法是让占位本身具备宽高约束：
- 父组件传入
width和heightProps，或通过aspect-ratioCSS 属性维持比例 - 推荐用 CSS 容器包裹
<img>，设置padding-top: 56.25%（16:9）等技巧实现响应式占位 - 若后端能提供图片原始宽高（如从图床元数据提取并存入数据库），可在渲染时直接注入 style 或 class，彻底锁定占位区域
懒加载逻辑：用 IntersectionObserver + Props 控制加载时机
组件内部不主动发起请求，而是依赖 Props 驱动行为：
-
onMounted中判断props.lazy，仅当为true时创建 IntersectionObserver 实例 - 观察器配置中的
threshold直接取自props.threshold，无需硬编码 - 进入视口后，将
props.src赋给<img>的src；加载成功则自然切换，失败则回退到props.fallback -
<img>初始src必须设为props.placeholder，不能留空或用data-src模拟——Vue 模板中需显式绑定
视觉降级要灵活，占位与错误图都应支持多格式
用户网络差、图片链接失效等情况频发，占位和 fallback 不该只是静态资源路径：
- 允许传入内联 SVG 字符串，避免额外 HTTP 请求，适合通用灰色方块或加载动画
- fallback 可传入图标字体类名（如
"icon-broken-image"），由父组件统一管理样式主题 - 对 placeholder 做简单 loading 状态处理：比如添加
class="is-loading"，配合 CSS 动画模拟渐变过渡
