页面要展示真实物件（商品图、封面图、相册、海报、插图），且要面对网络波动、加载失败、无图等状态。
商品详情页的图片位：加载中、成功、失败、空都长在物件上
切图片源（正常、慢、错误、空），看同一个图片位长出不同物件：骨架、真实图、AA 红错误占位、空态。错误态出现后点「重试加载」恢复；加载成功后点图片放大预览。
第 0 步：这是商品详情页的主图位。切「图片源」看同一个图片位长出不同物件（骨架、真实图、错误占位、空态）；错误态出现后点「重试加载」（主操作）恢复；加载成功后点图片可放大预览。所有变化长在图片位物件上。
骨架占位·加载中
alt「城市徒步活动海报，山景与日落」信息图 · 读屏始终会读
图片源（决定图片位长出什么）
对照：正常源下图片位先骨架后长出真实商品图。原因：稳定比例（aspect-ratio 16/10）加 alt 让加载前后都不跳、都可读。下一步：等加载完点图片放大预览，或切「慢源」看骨架。
面板教会的知识点
把刚才操作里看到的现象命名为五条规则。
- 稳定比例占位：切换任何源，图片位的高度（aspect-ratio 16/10）始终不变，加载前后都不跳布局。
- 加载中骨架：慢源、错误源、空源都先长出骨架 shimmer，告诉用户「正在加载」而不是「坏了」。
- 失败给恢复入口：错误态长出 AA 红错误占位加「重试加载」主操作；不露破图，用户知道下一步。
- 空态说清楚：没有图时用空态（虚线·暂无图片）说明「本应有图」，而不是空白或猜测。
- alt 始终可读：信息图的 alt「城市徒步海报，山景与日落」是作者写的，成功、失败、空态都在，读屏始终读得到。
什么时候用，怎么用
从一个具体信号判断，再走最短路径。
纯装饰背景（用 CSS 背景图加空 alt）；指认人物身份（用 avatar）；代表动作或分类（用 icon）；多图轮播（用 carousel）。
- 定比例：用 aspect-ratio 或固定宽高给图片位留位置，加载前、加载中、加载后尺寸一致。
- 定 alt：信息图 alt 写清「图片要传达什么」（活动名、主体、时间）；装饰图 alt 留空，靠邻近文字承担。
- 定加载策略：首屏关键图 eager，非首屏大图 lazy；加载中用骨架或模糊占位，不露空白。
- 定降级：加载失败给稳定错误占位加重试；无图给空态；裁切模式说明可能丢失的主体。
- 定可访问：alt 与可见信息同步；可点击图片说明动作（如「放大预览」）；焦点可见，键盘可操作。
同一商品主图：正例与反例
目标都是展示商品主图。差别只在于比例、alt、失败降级是否守规则。
固定 16/10 比例，加载中骨架占位；alt「城市徒步海报，山景与日落」；失败显示 AA 红占位加重试；可点击放大预览。
断网仍稳，读屏同步，用户知道是什么、能否继续。无固定比例，加载完撑高页面跳动；alt 空着；失败露出破图图标；点击无反应。
断网后不知缺什么，读屏什么也说不出，布局乱跳。快速自测
商品详情页的主图加载失败，用户最需要的是什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。