图片降级异常主因是<picture>结构错误、type值不标准或<img>的src不可直访；<img src="x.webp">在Safari≤13.1中静默丢弃请求，因未注册image/webp MIME类型，必须用<picture>显式声明格式优先级并配静态JPEG/PNG兜底。
图片降级显示异常，90% 是因为 <picture> 结构写错、type 值不标准、或 <img> 的 src 不可直访——不是浏览器“不兼容”，而是它根本没发请求，连错误都不报。
为什么 <img src="x.webp"> 在 Safari ≤13.1 里直接空白
旧版 Safari、IE、Android WebView 4.4 之前压根不在 MIME 白名单里注册 image/webp。遇到就静默丢弃，Network 面板里根本看不到该请求。这不是加载失败，是解析阶段就被跳过。
-
<img src="x.webp">没有 fallback 能力，不能当降级方案 - 必须用
<picture>显式声明格式优先级，靠结构兜底 -
<img>的src必须指向一个能在地址栏单独打开并显示的 JPEG/PNG 地址（如logo.jpg），不能带查询参数（?format=webp）
<source type> 的值必须和服务器 Content-Type 完全一致
浏览器只认标准 MIME 类型字符串，错一个字符（比如空格、大小写、拼写）就彻底跳过该 <source>。Chrome 可能侥幸加载，Safari 一定失效。
- ✅ 正确：
type="image/webp"、type="image/avif"、type="image/jpeg"（注意是jpeg，不是jpg） - ❌ 错误：
type="webp"、type="image/jpg"、type="image/png "（末尾空格） - Nginx 需配置
types { image/webp webp; }，否则 .webp 文件返回application/octet-stream，浏览器直接忽略
<picture> 中 <img> 不是“备选”，是强制兜底入口
<picture> 本身不渲染也不请求，真正触发加载的是匹配成功的 <source> 或最终的 <img>。漏掉 <img>，或它的 src 404，整个结构就退化为纯文本或空白。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
<img>必须写在所有<source>之后，且src和alt都不可省 -
<img src="fallback.jpg">是 IE11、微信旧版 WebView 等环境里唯一能识别并渲染的元素 - 所有格式图片（AVIF/WebP/JPEG）必须宽高一致、构图一致，否则切换时视觉跳变，用户感知为“闪白”
onerror 降级必须配 this.onerror=null 才可靠
只写 onerror="this.src='/fallback.png'" 是无效的：fallback 图再 404，事件不会二次触发，而是静默失败。你看到的“换图失败”，其实是第一次赋值后事件已被自动卸载。
- ✅ 唯一安全写法：
onerror="this.src='/img/placeholder.svg'; this.onerror=null;" - 更稳妥：
onerror="if (!this.src.includes('placeholder')) this.src='/img/placeholder.svg'; this.onerror=null;" - 推荐用 base64 内联 SVG 占位图（如
data:image/svg+xml;base64,PHN2Zy...），避免路径失效风险
最容易被忽略的点：所有格式图片 URL 必须真实可访问，且服务端返回的 Content-Type 与 HTML 中写的 type 完全一致——差一个字符，就静默丢弃；路径错一级，就进不了兜底。
