img 标签不支持自动 fallback，需用 CSS 背景图+透明 img 叠加或 onerror JS 替换实现；必须显式设置宽高，background-size 控制缩放，内联 onerror 最简且需加 this.onerror=null 防死循环。
img 标签本身不支持 fallback 图片，src 失败时不会自动切到其他图
浏览器对 <img> 的容错极低：只要 src 返回 404、跨域拒绝、MIME 类型错误或网络中断，图片就留白或显示缺省图标，且 onerror 是唯一可捕获的时机。CSS 无法监听加载状态，所以纯 CSS 实现“替代图”本质是障眼法——靠背景图兜底，把 src 当前景层。
用 background-image + src 双层叠加模拟 fallback
核心思路：让 <img> 占位但允许透明失败，背后用 CSS 背景图托底。需同时控制尺寸、裁剪和加载行为。
- 给
<img>设置background-color: transparent（防默认灰边）和background-image，确保失败时背景可见 - 必须显式设
width和height，否则背景图不渲染（<img>无内容时宽高为 0） - 用
background-size: cover或contain控制背景图缩放，避免拉伸变形 -
src加载成功时会盖住背景；失败时因图片透明，背景自然浮现
img.fallback {
width: 200px;
height: 150px;
background-image: url('/images/placeholder.png');
background-size: cover;
background-position: center;
background-color: transparent;
}
onerror 写内联 JS 是最稳的兜底，但要注意执行时机
CSS fallback 有局限：无法适配不同尺寸的占位图、不能动态换图、不支持 SVG 占位符内联。真要可靠替换，还是得靠 JS 捕获错误并改 src。
- 内联
onerror="this.src='/images/placeholder.png'; this.onerror=null;"最简，onerror=null防止占位图再失败导致死循环 - 不要在
onerror里调用函数（如onerror="handleError()"），全局函数可能未定义或被压缩混淆 - 若用现代 JS，推荐
addEventListener('error', ...)，但需确保脚本在 DOM 加载后执行，否则监听不到 - 注意：某些 CDN 或代理会把 404 响应改成 200 空页，此时
onerror不触发
SVG 内联占位符比 PNG 更轻量，但需处理 base64 或 data URL
如果占位图只是简单图标或文字，内联 SVG 能彻底避免额外请求，且可缩放不失真。
立即学习“前端免费学习笔记（深入）”；
- 把 SVG 转成 data URL（如
data:image/svg+xml;base64,...）直接塞进background-image或src - 注意 URL 中的
#、<、>必须编码，否则 CSS 解析失败；建议用在线工具生成安全 data URL - 内联 SVG 作为
src时，IE11 不支持，如需兼容得降级为 PNG - 用
<picture>+<source>无法解决加载失败问题，它只管响应式选源，不处理失败兜底
width/height，CSS fallback 就完全不可见；还有人把占位图路径写错却忘了检查 404，结果两层都挂了。 
