直接写必然在Safari≤13.1、IE、旧版Android WebView中留白，因浏览器不识别image/webp MIME类型，既不请求也不报错；+是唯一可靠降级方案，但需确保type值严格正确、src为静态可直访路径且兜底图真实存在。

直接写 必然在 Safari ≤13.1、IE、旧版 Android WebView 中留白，这不是“兼容性差”，是浏览器压根不识别 image/webp MIME 类型，连请求都不会发。

为什么 + 还是空白

常见错误不是语法错，而是逻辑断层：

• type 值写错：写成 type="webp" 或 type="image/jpg" —— 必须严格为 image/webp、image/jpeg、image/png、image/avif
• 全部加载失败（404 / 跨域 / 网络中断），但 也无效 → 整个结构退化为仅显示 alt 文本，而非备用图
• 的 src 指向带查询参数的路径（如 logo.jpg?format=webp）→ 旧浏览器会发请求，但服务器可能返回 406 或损坏数据
• 的 src 不是静态可直访地址：比如用 CDN 动态转码 URL（?x-oss-process=image/format,avif）作兜底，旧浏览器根本无法解码

顺序和 media 属性怎么写才不被跳过

浏览器按从上到下逐条检查，满足「支持该 type」且「资源可加载」就停，不会继续往下看。任何一处写错，后续就全废：

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

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

下载

• media 必须是完整合法媒体查询：media="(max-width: 768px)" ✅，media="max-width: 768px" ❌（缺括号）
• 避免临界重叠：max-width: 768px 和 min-width: 768px 在 768px 宽度下都命中，但只有前者生效；推荐用开区间：max-width: 767px → min-width: 768px → min-width: 1024px
• AVIF 放最前，WebP 次之，JPEG/PNG 必须落在 的 src 里，不能塞进第三个
• 验证方式：打开 Chrome DevTools → Network 面板 → 切换设备尺寸 → 看发出的图片请求是否匹配你写的 media 和 type

断网或 JS 失效时，图片还能加载吗

能，但前提是降级不依赖 JS，且 HTML 结构自洽：

• 的 src 必须指向一个真实存在的、无需协商的 JPEG/PNG 地址，例如 /images/logo.jpg，而不是 /api/image?id=123
• 不要把关键图（如首屏 banner、商品主图）加 loading="lazy"；它们的 src 应该直接写死，不设 data-src，不靠 JS 补充
• 如果用了 onerror 写回退（如 onerror="this.src='/fallback.jpg'"），确保 fallback 图本身绝对可用——它不能再触发第二次 onerror
• 服务端渲染（SSR）必须把首屏图片的 src 渲染为真实路径，不能只留占位符等 JS 来填

最容易被忽略的一点：所有格式的图片宽高、裁剪比例、构图必须一致。否则 WebP 加载成功、JPEG 回退时，视觉跳变会比白屏更伤体验。

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