onerror单独使用易失效，因fallback图404会导致静默失败、无法冒泡委托、SSR时JS未加载即失效；需结合picture强制img兜底、绝对路径占位图、src始终指向高可用资源。
单页 HTML 中图片降级不是“加个 onerror 就完事”，而是要分层防御：浏览器原生能力兜底、资源路径可靠性保障、断网/弱网时 DOM 仍可渲染。核心原则是——img 的 src 永远不能是空的、无效的，或依赖 JS 才能生效。
为什么 onerror 单独用会失效
很多人写 <img src="broken.jpg" onerror="this.src='fallback.jpg'">，但实际中常白屏。原因有三：
- 如果
fallback.jpg本身也 404，第二次请求失败后不会继续重试，最终只显示alt -
onerror不冒泡，无法事件委托统一处理；多个图片就得重复写，维护成本高 - 在 SSR 或静态生成场景下，JS 还没加载时页面已渲染，而
onerror是运行时触发，断网时根本不会执行
<picture></picture> 必须带真实 <img src> 作为最终 fallback
<picture></picture> 不是“多图切换语法糖”，它的 <img> 子元素是强制存在的渲染载体。所有 <source></source> 都失败时，浏览器仍会尝试加载这个 <img src> —— 它必须指向一个高可用地址。
错误写法：<img src="" alt="..."> 或 <img src="/assets/missing.png" alt="...">（路径在 CDN 上不存在）
正确写法：<img src="https://cdn.example.com/placeholder-320x240.jpg?x-oss-process=image/resize,p_40" alt="商品主图">
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- URL 必须是绝对路径，且托管在稳定 CDN 上（避免相对路径在
<noscript></noscript>或离线时解析失败） - 这张图不必高清，但必须小（≤2KB）、可缓存、长期存在；建议用业务通用占位图，而非临时路径
- 不要把
<img>写在<source></source>前面——顺序错会导致整个<picture></picture>被忽略
断网时图片不白屏的关键：src 永远指向可用资源
懒加载、响应式、格式降级这些功能都建立在“网络可用”前提上。一旦断网，唯一能被浏览器直接加载的只有 src 属性值。
- 首屏关键图（如 logo、主图）禁用
loading="lazy"，且src直接写真实 URL，不依赖data-src或 JS 注入 - 非首屏图可保留
loading="lazy"，但其src必须是低质量占位图（如 1px GIF 或 base64 编码的模糊图），确保即使 JS 失败也能渲染出轮廓 - 避免
src="about:blank"、src=""、src="data:"（部分老浏览器不支持 data URI）等不可靠值
服务端静态兜底页里图片怎么写才真正可靠
当后端返回 /fallback.html 时，这个页面必须脱离任何运行时环境独立工作。
- 所有图片用绝对 HTTPS URL，指向 CDN 上长期有效的资源，例如
https://static.example.com/fallback-logo.png - 禁用
<picture></picture>和srcset—— IE11、Lynx、某些 WebView 不支持，且断网时 JS 无法补救 - 不依赖 CSS 控制尺寸：给
<img>加width和height属性（或内联style="max-width:90%"），防止布局抖动 - 验证方式：用
curl -s https://yoursite.com/fallback.html | grep img确保所有src是完整、可访问的链接
最容易被忽略的一点：降级不是“让图片变好看”，而是“让文字和结构先出来”。只要 src 可加载，哪怕图糊一点、小一点，用户至少能看到页面在运转。所有 fancy 功能——WebP 切换、视口适配、懒加载动画——都得排在这之后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
