图片降级失败主因是路径错误导致<img src>兜底失效，进而使整个<picture>逻辑崩溃；所有<source>与<img src>路径须统一用根相对路径、大小写敏感、Content-Type严格匹配，且需通过Network面板验证真实请求。
图片降级路径错误不是“没写 fallback”，而是路径一错，<img src>兜底直接失效——整套 <picture> 逻辑就崩了。
为什么 <picture> 里图片全白屏，连 JPEG 都不加载
浏览器只加载第一个匹配的 <source> 或强制兜底的 <img src>；如果 <img src="images/logo.jpg"> 路径错了（比如实际文件在 /assets/images/），那所有现代格式都会跳过，最终页面只剩 alt 文本。
-
<img src>必须是静态、真实可访问的路径，不能是相对路径误算后的结果（如 HTML 在/about/index.html时，src="images/logo.jpg"实际请求的是/about/images/logo.jpg） - 所有
<source>的srcset路径必须和<img src>同级结构，否则切换格式时会 404 - 本地双击打开 HTML 时，
src="logo.png"常失败，而src="./logo.png"更可靠（显式声明当前目录）
<source> 和 <img src> 的路径怎么对齐才不翻车
关键不是“写对一个”，而是让所有路径在**同一套解析上下文**下生效。浏览器对 <source> 和 <img> 的路径解析规则完全一致，但开发者常手动写错层级。
- 统一用以
/开头的根相对路径：src="/images/logo.webp"、srcset="/images/logo.avif"、<img src="/images/logo.jpg"> - 避免混用：不要
<source srcset="img/logo.webp">却写<img src="./images/logo.jpg">（前者按 HTML 所在目录解析，后者显式指定当前目录，嵌套路由下极易错位） - 检查大小写：Linux 服务器上
LOGO.JPG≠logo.jpg，路径错一个字母就是 404
如何快速验证所有图片路径是否真实有效
别靠“看起来像对的”，直接看 Network 面板里浏览器到底发了什么请求。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Network → 刷新页面 → 筛选
img类型 → 检查每条请求的 **Status** 和 **URL** 列 - 重点看
<img src>对应那行：如果 URL 是http://localhost:3000/about/images/logo.jpg，但你文件实际在/public/images/，那就得改路径 - 批量排查命令（控制台运行）：
Array.from(document.images).filter(i => i.naturalWidth === 0 && i.src)—— 列出所有“请求发出去了但没内容”的图，它们可能返回了 200 空响应，onerror不会触发
onerror 不能救路径错误，只能补最后一道防线
onerror 只响应“请求发出后失败”，对路径语法错误、空 src、CORS 阻塞、服务器返回 200 占位图等场景完全无感。
- 正确写法（内联 + 自切断）：
onerror="this.src='/img/fallback.png'; this.onerror=null" - 更稳写法（防 fallback 本身也挂）：
onerror="if (!this.src.includes('fallback')) this.src='/img/fallback.png'; this.onerror=null" - 终极保底（无需网络）：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg=='; this.onerror=null"
最常被忽略的一点：所有格式图片（AVIF/WebP/JPEG）的 URL 必须真实可访问，且服务端返回的 Content-Type 必须严格匹配 type 属性——路径对了，Content-Type 错了，照样跳过该 <source>。
