图片加载失败时布局崩塌的根源是未声明width和height属性，导致浏览器无法预先分配空间；必须用html属性而非css设置尺寸，并在onerror中同步重设style.width/style.height以稳定布局。
img 加载失败时默认会显示一个断裂图标（broken image），同时保留原始 width 和 height 占位，但若未设尺寸，它会塌成一行内联元素，撑乱行高、错位、甚至把父容器拉宽——这才是降级后布局崩掉的真正原因。
为什么 onerror 只换 src 不够用
只写 onerror="this.src='fallback.jpg'" 能换图，但无法修复已发生的布局抖动：浏览器在解析到 img 标签时就按原始尺寸预留空间；加载失败后 DOM 结构不变，只是内容替换了。如果原图是 1200×800，而 fallback 是 200×150，视觉上小图被“挤”在大框里，或因没设 height 导致周围文字上移。
- 必须提前声明
width和height属性（HTML 属性，非 CSS），让浏览器在加载前就分配好盒模型空间 -
onerror回调里应同步重设style.width/style.height，否则 fallback 图仍按原图尺寸渲染 - 避免仅靠 CSS
max-width: 100%控制尺寸——它不参与初始布局计算，对降级无约束力
img 降级时如何稳住父容器高度
当图片失效，父容器（尤其是 flex 或 grid 项）常因子项塌缩而高度归零，导致下方内容上跳。关键不是等图片加载完再布局，而是从一开始就不给它“塌”的机会：
- 给
img显式设height和width属性（如<img style="max-width:90%" style="max-width:90%">），这是最轻量、兼容性最好的占位方案 - 父容器加
min-height（值建议与图片固有高一致），防止内容区彻底收缩 - 若用
aspect-ratio，必须作用于外层<div class="img-wrapper">，且该容器需有 <code>width或max-width才能推算高度；img本身设height: 100%+object-fit: cover - 慎用
visibility: hidden或opacity: 0做加载过渡——它们不释放空间，降级后若没显式 show，容器仍被“幽灵占位” - 用
<picture></picture>+<source></source>+<img>结构，把 fallback 地址写在最末的<img src="fallback.jpg">中——这是所有浏览器都认的兜底 - 避免在 IE 中依赖
background-image降级：CSSbackground失效时无任何占位，比img更不可控 - 对 IE8 及以下，
img的onerror可能完全不执行，必须配合服务器返回 1×1 透明 GIF 作为主图占位，再靠 CSS 覆盖真实内容（如伪元素 +content） - 不要用 JS 动态插入
img标签做降级——IE 下 DOM 插入时机与渲染队列不同步，极易造成闪动或空白
老浏览器（IE8–IE11）中图片降级的特殊处理
IE 对 onerror 支持不稳定，且不识别 srcset，一旦主图 404，fallback 很可能也不触发。此时依赖 HTML 层面的防御性写法：
真正难的不是换张图，而是让整个布局链在图片缺席时依然有确定的尺寸锚点。所有样式和 JS 补救，都比不上一开始就写对 width 和 height 属性——它们是浏览器布局引擎唯一能静态解析的“契约”。
