必须为img设width/height html属性预留空间，配合object-fit、aspect-ratio、display:block及table-layout:fixed等样式，确保加载失败时布局不塌陷、不换行、不错位。
图片加载失败时如何不破坏网格或容器结构
直接写 <img src="missing.jpg"> 且没做任何兜底，一旦路径出错，浏览器会渲染一个带边框的空白占位符（通常高约20px），在 Grid 或 Flex 布局里会撑开行高、错位、甚至触发换行。这不是“图片没显示”，而是“布局被毁了”。
- 必须给
<img>设明确尺寸：用width和height属性（HTML 属性，非 CSS），让浏览器提前预留空间，避免加载失败后重排 - 配合
object-fit: cover或contain+ 父容器aspect-ratio，确保即使 fallback 图片尺寸不同，也不会拉伸或溢出 - 禁用
display: inline默认行为：对所有图片加display: block，防止底部多出几像素空白（由基线对齐引起）
onerror 降级必须同步更新父容器状态
只改 this.src 是不够的。比如你用 <figure class="gallery-item"></figure> 包裹图片，当加载失败后，如果仅替换图片，但没移除原图的 loading 状态类或没添加 error 类，CSS 动画、遮罩层、操作按钮的显隐逻辑就会错乱。
- 推荐写法：
<img src="a.jpg" onerror="this.src='placeholder.svg'; this.classList.add('error'); this.parentElement.classList.add('has-error');"> - 不要依赖全局
document.querySelectorAll('img').forEach(...)绑定 error 事件——动态插入的图片不会自动生效，得用事件委托或 MutationObserver - 开发阶段快速定位：在控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0 && !i.classList.contains('error'))，能立刻揪出漏处理的坏图
table-layout: fixed 是表格内图片稳定的硬要求
在表格中放图却没设 table-layout: fixed，是导致“一加图就列宽崩塌”的最常见原因。浏览器默认按内容撑开列宽，而图片加载失败后变成空盒，列宽瞬间收缩，相邻单元格内容挤作一团。
- 必须给
<table> 加 <code>style="table-layout: fixed; width: 100%;"，再给每列<td> 显式设 <code>width（如width="120"或style="width: 120px;"） <td> 内部用 <code>overflow: hidden+img { max-width: 100%; height: auto; display: block; }，三者缺一不可- 避免对
<img>使用vertical-align或margin调整位置——它会干扰table-layout: fixed的尺寸锁定逻辑 -
<meta name="viewport" content="width=device-width, initial-scale=1">必须存在且位于最前面，否则 iOS Safari 会先以桌面视口渲染，再缩放，导致 rem 计算错乱 - 所有涉及尺寸的 CSS（包括 placeholder 容器的
width、padding、font-size）都该用rem，而非px或%；max-width可用px或vw，但别混用 - 如果 placeholder 是 SVG，务必内联或确保其
viewBox正确，否则用width: 100%拉伸时会糊或变形
rem + viewport 缺一不可，否则缩放时降级图也会错位
很多人加了 placeholder，也写了 onerror，但用户一缩放页面，fallback 图就偏移、变小、甚至被裁掉一半。问题不在图片本身，而在单位体系没对齐。
onerror，而是让降级后的 DOM 结构、盒模型行为、缩放响应全部和正常图片保持一致。每个环节断链，都会在某个缩放比例或设备上暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
