如何利用 Props 实现图片组件的占位图逻辑：提升用户体验干货

图片占位图应通过Props精准控制：用loading/error状态驱动渲染骨架屏/备用图，fallbackSrc实现稳定降级，aspectRatio/width/height保持布局稳定，lazyLoad开关启用原生懒加载，全面提升可控性与可测性。

图片加载前显示占位图，不是靠猜或硬编码，而是用 Props 精准控制行为。核心思路是：把“是否加载中”“是否有错误”“默认图地址”都变成可配置的 Props，让组件自己判断该渲染什么。

用 loading 和 error 状态驱动占位逻辑

不要在组件内部用 useState 模拟加载状态，而是接收外部传入的 loading 和 error 布尔值 Props。这样既解耦又可控，尤其适合搭配 Suspense、React Query 或自定义 Hook 使用。

• loading={true} → 渲染骨架屏或纯色占位
• error={true} → 切换到备用图或错误图标
• 两者都为 false 且 src 有效 → 正常渲染图片

支持 fallbackSrc 实现优雅降级

传入 fallbackSrc Props，作为网络失败或 src 为空时的兜底图片。它和原生 <img> 的 onerror 不同——后者触发时机晚、无法拦截 CORS 错误，而由父组件提前判断并传入 fallbackSrc，更稳定、更易测试。

• fallbackSrc 可以是本地静态资源（如 /images/placeholder.svg）
• 也可动态生成（如基于用户头像颜色的 initials 占位图 URL）
• 若未提供 fallbackSrc 且出错，可退化为带文字提示的 div

用 width/height + aspectRatio 保持布局稳定

图片加载前空白塌陷，本质是尺寸未知。通过 width、height 或 aspectRatio Props 提前声明容器比例，配合 CSS object-fit，就能避免重排。

• 推荐传 aspectRatio="4/3"（CSS 支持，无需 JS 计算）
• 若需精确像素控制，传 width={300} + height={200}，组件内转成内联 style
• 不建议只传 width 并设 height: auto —— 加载中仍会跳动

加个 lazyLoad 开关，按需启用原生懒加载

用 lazyLoad={true} Props 控制是否添加 loading="lazy" 属性。对首屏图片默认关闭，对列表中非首屏图片开启，兼顾性能与兼容性。

• Chrome/Firefox 支持良好；Safari 需 v15.4+；老版本可结合 IntersectionObserver 手动实现
• 服务端渲染（SSR）时，loading="lazy" 会被忽略，不影响首屏
• 搭配 decoding="async" 可进一步优化解码时机

不复杂但容易忽略：占位图的价值不在“好看”，而在“可预期”。把加载态、错误态、尺寸、懒加载全交给 Props 管理，组件就真正变成了一个受控、可组合、易测试的 UI 砖块。