srcset解析失败时浏览器会静默忽略，直接加载img的src，因此src才是唯一可靠兜底；它必须是根相对路径、文件真实存在且Content-Type正确。

srcset 解析失败时，浏览器会静默跳过它，直接加载 img 的 src；所以降级不是“自动发生”的，而是靠你写的 src 是否真实可用——它才是最后一道防线。

为什么 srcset 会被浏览器完全忽略

浏览器对 srcset 的解析极其严格，一个语法或逻辑错误就整条属性失效，且不报错、不警告。常见原因包括：

• srcset 里混写了 x 和 w 描述符（例如 "icon.png 1x, photo.jpg 800w"），Chrome 会直接丢弃整个 srcset
• 用了 w 却没配 sizes 属性——这不是兼容性问题，是规范强制要求，缺了就退化
• sizes 值写错单位：比如 "50%"、"400"（缺 px 或 vw）、"calc(100vw - 32px)"（calc() 在 sizes 中非法）
• media 写在 上但括号缺失，如 media="max-width: 768px" ❌，正确应为 media="(max-width: 768px)" ✅
• srcset 值为空或只含空格，或路径含未编码的空格、中文、特殊符号

应急时怎么快速验证 srcset 是否生效

别看代码“长得像对的”，直接查浏览器行为：

• 打开 DevTools → Network → 刷新页面 → 筛选 img 类型 → 找到对应图片请求，看 URL 是不是来自 src 还是某个 srcset 候选项
• 在 Console 里运行 document.querySelector('img').currentSrc，返回值就是浏览器最终选中的地址；如果始终等于 img.src，说明 srcset 没参与选择
• 临时删掉 srcset 和 sizes，只留 src，确认图片能正常加载——这是判断“兜底是否可靠”的第一步

srcset 失效后，如何让 img.src 真正扛住

src 不是摆设，它是所有旧浏览器和所有解析失败场景下的唯一出口。但它必须满足三个硬条件：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 路径必须是**根相对路径**（如 /images/logo.jpg），避免因 HTML 所在目录不同导致解析错位（about/index.html 中写 images/logo.jpg 会请求 /about/images/logo.jpg）
• 文件必须真实存在、大小写完全匹配（Linux 服务器上 LOGO.JPG ≠ logo.jpg）
• 服务器返回的 Content-Type 必须正确（JPEG 必须是 image/jpeg，不是 text/plain 或 application/octet-stream）
• 建议用 JPEG 或 PNG 作兜底，不要用 WebP——IE、老 Android WebView 完全不支持，会直接白屏

onerror 能不能救 srcset 失效？不能，但能救 src 加载失败

onerror 对 srcset 解析失败完全无感，它只响应“请求发出后失败”。但它可以补 src 这最后一环：

• 内联写法最稳：onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"
• 必须加 this.onerror=null，否则备用图也 404 就死循环
• 优先用 data:image/svg+xml;base64,... 或绝对路径 SVG，体积小、无解码失败风险
• 动态创建的 img 元素，onerror 必须在设置 src 之前绑定，否则首次错误捕获不到

真正容易被忽略的是：你改了 srcset，却没同步更新 src 的路径或格式；或者测试时只看 Chrome，忘了 Safari 对 sizes 语法更敏感。降级不是靠“多写几行”，而是靠 src 这一条路本身走得通。

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