图片加载失败时需结合onerror事件、base64占位图、css伪元素和picture语义化结构实现健壮降级：onerror替换src并设this.onerror=null防递归，base64 svg需url编码，::before撑开容器，提供格式/尺寸fallback但不处理失败。
图片加载失败时显示备用文字或颜色块
直接用 <img> 的 alt 属性无法在现代浏览器中可靠触发视觉占位——它只在图片完全缺失或被禁用时显示，而网络超时、404、CORS 阻断等常见失败场景下，alt 文字往往不渲染，页面留白或出现破损图标。真正可控的降级需要结合事件监听和样式兜底。
用 onerror 替换 src 并 fallback 到纯色占位图
这是最轻量、兼容性最好的方案：在图片加载失败时，用内联 onerror 把 src 换成一个 base64 编码的单色 SVG 或 PNG 占位图，同时移除 onerror 自身防止重复触发。
-
onerror必须写在<img>标签内，不能靠 JS 统一绑定（否则首次失败时已无 DOM 可监听） - base64 占位图要足够小（推荐 1×1 或 16×16 的 SVG），避免二次请求开销；例如：
data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" viewbox="0 0 1 1"><rect width="1" height="1" fill="%23eee"></rect></svg> - 务必加
this.onerror = null，否则当 fallback 图也加载失败（极罕见但可能），会无限递归调用
@@##@@<rect width="1" height="1" fill="%23eee"></rect>'; this.onerror=null;"
alt="描述性文字">
CSS ::before + background-color 做无图占位骨架
适用于响应式布局中需保持宽高比、且允许无图状态下显示背景色+边框的场景。关键在于脱离 <img src="photo.jpg" onerror="this.src='data:image/svg+xml,<svg xmlns=" http: style="max-width:90%" style="max-width:90%" viewbox="0 0 1 1"> 自身渲染流，用伪元素撑开容器。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须给
<img>设置display: block和明确的width/height（或aspect-ratio），否则::before无法继承尺寸 -
::before要设content: ''、position: absolute、inset: 0，再配background-color和可选的border - 该方式不解决图片加载中的“闪白”，需额外加
opacity过渡或loading="lazy"配合
.img-placeholder {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
}
.img-placeholder::before {
content: '';
position: absolute;
inset: 0;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
现代方案：用 <picture></picture> + <source></source> 提供多格式 fallback
当需要按设备能力（如 WebP 支持）、网络条件（media 查询）或分辨率（srcset）提供不同图片时，<picture></picture> 是语义正确且浏览器原生支持的降级路径，但注意它不处理加载失败，只是格式/尺寸选择。
-
<source></source>按顺序匹配，第一个满足条件的生效；所有<source></source>都不匹配时，才回退到内部<img>的src - 必须保留末尾的
<img>标签，它既是 fallback，也是无障碍必需节点 - 不要指望
<source></source>的type属性能拦截 404 —— 类型匹配成功后，实际加载仍可能失败，此时仍需onerror补充兜底
<picture><source type="image/webp" srcset="photo.webp" media="(min-width: 768px)"><source type="image/jpeg" srcset="photo.jpg"> @@##@@ </source></source></picture>
真正健壮的降级从来不是单点方案：CSS 控制骨架、HTML 结构定义语义优先级、JS 事件捕获真实失败、base64 占位图消除请求依赖——四者叠加才能覆盖从弱网、CORS 到资源误删的全部常见故障链。最容易被忽略的是 onerror 的递归防护和 base64 中 URL 编码字符（如 # 必须为 %23），写错一个字符就会让整个 fallback 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
