<picture>降级失败主因是结构错误或兜底失效：<img>缺失、type拼错、所有<source>匹配但404/格式错/Content-Type不匹配时不会触发回退；<img>必须存在且src可直访，onerror需内联并防循环。
<img>缺失、type值拼错、或所有<source>都加载失败却没触发<img>回退。
为什么所有都404了，页面还是白屏
浏览器不会因为<source>加载失败就自动切到<img>。它只在「没有一个<source>满足media条件」时才用<img>；如果media匹配成功但资源返回404、格式损坏、或服务器返回的Content-Type不匹配（比如type="image/webp"但响应头是Content-Type: image/jpeg），浏览器就静默留白，不报错也不降级。
- 验证方式：打开 DevTools → Network → 点开那个请求 → 检查 Response Headers 中的
Content-Type是否与<source type="">完全一致 -
image/jpeg不能写成image/jpg，image/webp末尾不能多空格 - AVIF 文件被 Nginx 当作二进制流返回（
Content-Type: application/octet-stream）时，Chrome/Firefox 会直接跳过该<source>
为什么![HTML图片降级失败的原因]()
写了却没显示
<img>不是可选的“备用项”，而是<picture>结构的必需子元素和最终渲染载体。漏掉它，整个<picture>在 IE11、旧 WebView 中会被忽略，只剩空白。
-
<img>必须写在所有<source>之后，且src必须是静态可直访路径（如/assets/logo.jpg），不能带查询参数（logo.jpg?format=webp可能触发 406 或解析失败） -
src地址必须能在浏览器地址栏单独打开并显示正常图片——这是验证路径 + MIME 的最快方式 - 若
<img>的src也 404，整个降级链就断了，只剩alt文本（而alt=""可能完全不显示）
onerror为什么不触发或失效
onerror只对<img>自身的src失败触发，不监听<source>；它必须内联写在 HTML 中，动态绑定在 Safari 和旧 Edge 中大概率不生效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须加
this.onerror=null，否则 fallback 图也 404 会导致无限循环或静默失败 - 推荐写法：
onerror="this.src='/assets/placeholder.svg'; this.onerror=null;"（分号不能省，顺序不能调） - 不要写成
onerror="fallback()"——函数未定义时整个事件处理器解析失败，onerror彻底不执行 -
onerror对空src、CORS 阻塞、服务器返回 200 占位图（如/404.png?text=not-found）等情况完全静默
为什么降级后图片变形或闪动
根本原因不是格式切换本身，而是 JPEG/PNG 兜底图与 WebP/AVIF 图的 intrinsic 尺寸（原始像素宽高）不一致。浏览器按不同元数据计算高度，导致 layout shift。
立即学习“前端免费学习笔记（深入）”；
- 必须确保所有格式图片逐像素宽高一致：用
file logo.webp和file logo.jpg确认尺寸，或用exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg补全缺失字段 - 避免用 CDN 动态转码路径（如
?x-oss-process=image/resize,w_800）作兜底，返回的 JPEG 往往不带完整元数据 - 无法统一 intrinsic 尺寸时，改用 CSS 容器控制比例：
style="aspect-ratio: 16 / 9; object-fit: cover;"，但需注意 Safari ≤15.2 不支持，得配padding-top降级
Content-Type与 HTML 声明不一致、<img>的src路径在 SSR 后不可达、或 fallback 图本身依赖了同一套可能失效的 CDN 路径。
