图片占位图应通过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 砖块。
