不能只靠src降级，因为旧浏览器（如IE、Safari≤13.1）不识别image/webp MIME类型，遇到会静默丢弃而非尝试PNG/JPG；必须用显式声明格式，并以作强制兜底，且须为开放标签、无srcset、路径可直访。

为什么 不能只靠 src 降级？

浏览器加载图片时， 遇到不支持 WebP 的旧浏览器（比如 IE、老版 Safari），会直接报 404 或空白——它不会自动尝试换 PNG 或 JPG。单纯改后缀没用，必须由 HTML 显式声明备选路径和格式条件。

的 type 属性必须精确匹配 MIME 类型

浏览器按 顺序检查 type，只加载第一个满足类型支持且媒体查询也通过的资源。写错类型会导致整组回退失效：

• type="image/webp" ✅ 正确（注意不是 webp 或 .webp）
• type="image/jpg" ❌ 错误，应为 image/jpeg
• type="image/png" ✅ 正确
• 未写 type 的 会被忽略（除非是最后一个 ）

回退链必须以 结尾，且不能带 srcset 或 sizes

的设计逻辑是：前面所有 都不匹配时，才兜底执行最后的 。这个 是唯一真正渲染的元素，所以：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 它必须有 src（比如 src="fallback.jpg"），且该地址要能被所有浏览器访问
• 它不能有 srcset 或 sizes —— 这些属性在 内部由 管理，加在 上会被忽略
• 它的 alt、width、height 等属性照常使用，不影响回退逻辑

<picture><source type="image/webp" srcset="photo.webp"><source type="image/avif" srcset="photo.avif">
  @@##@@
</source></source></picture>

IE11 及更旧浏览器完全不识别 ，需额外处理

IE11 不解析 ，会跳过所有 ，但能渲染内部的 ——这反而是好事。不过要注意：

• 如果把 写成自闭合标签 ，IE 会丢掉整个节点，必须写成 开放标签
• 某些构建工具（如旧版 webpack html-loader）可能自动转义 ，导致生产环境失效，需检查最终 HTML 源码
• 若需支持 IE9–10，只能放弃 ，改用 JS 检测 + 动态设置 img.src，或服务端 UA 判断

实际项目里最容易漏的是 type 的 MIME 拼写，以及忘了 必须是开放标签。一旦回退失败，先查浏览器开发者工具的 Network 面板，看最终请求的是哪个 URL，再逆向核对 的 type 是否被识别。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！