srcset 中 w 描述符必须与图片真实宽度一致，sizes 需匹配实际渲染宽度，src 不可省略且须为有效资源，调试时须禁用缓存并核验 currentSrc、Network 响应与 Computed width 三者一致。
srcset 里写 w 描述符必须和原图真实宽度一致
浏览器靠 srcset 中的 320w、768w 这类值，结合 sizes 计算出“该加载多宽的图”，再匹配最接近的资源。如果写成 photo.jpg 400w，但图实际是 382px 宽，浏览器会误判渲染尺寸，导致选错源甚至跳过整个 srcset。
实操建议：
- 用 identify -format "%w" photo.jpg（ImageMagick）或在线工具确认每张图的真实像素宽度
- 所有 srcset 项统一用 w 描述符，禁止混用 1x/2x 和 w
- 构建时加校验脚本：扫描 HTML 中所有 srcset，比对文件名后缀与声明的 w 值是否逻辑自洽（如 hero-1200.jpg 1200w）
sizes 属性不匹配 CSS 实际渲染宽度就等于没写
sizes="(max-width: 768px) 100vw, 50vw" 看似合理，但如果图片容器被 max-width: 600px 限制，或父级有 transform: scale(0.9)，浏览器计算出的目标宽度就会严重偏移，最终加载远超需要的大图，甚至因超时失败而回退到 src。
实操建议：
- 在 Chrome DevTools 的 Elements 面板中右键图片 → Scroll into view，然后看右侧 Computed 标签页里的 width 值，这就是浏览器认为的“渲染宽度”
- sizes 必须按这个值反推，例如容器始终占视口 33%，就写 sizes="33vw"，而不是猜断点
- 禁用缓存后刷新，Network 面板看实际加载的资源名，验证是否和预期一致
src 属性不可省，它是 IE11 和部分 Android WebView 的唯一入口
只写 srcset + sizes，不设 src，旧浏览器会直接忽略整张图，页面留白。更糟的是，某些 CDN 或代理在响应头里删了 srcset，此时连现代浏览器也会 fallback 失败。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- src 必须指向一张真实存在、HTTP 200、格式兼容（JPG/PNG）的图，推荐用主站同域下的 800w 主图或 LQIP
- 不要用 src=""、src="#" 或空 data URL —— 这些在 Safari 或低版本 Chrome 中会触发 onerror，但用户看不到任何内容
- 若用构建工具（Vite/Webpack），可用插件自动注入 src：扫描 srcset 中第一个有效路径，截取基础文件名后补上 .jpg 作为 src 值
调试时禁用缓存 + 检查 Network 面板才是唯一真相
光看 HTML 源码或 Elements 面板里的属性，看不出浏览器到底加载了哪张图。DevTools 默认启用内存/磁盘缓存，可能复用上次加载的资源，掩盖 srcset 配置错误。
实操建议：
- 打开 Network 面板 → 勾选 Disable cache → 刷新页面
- 找到图片请求 → 右键 → Copy → Copy response → 粘贴进文本编辑器，确认返回的二进制确实是对应尺寸
- 在 Console 里运行 document.querySelector('img').currentSrc，看当前生效的 URL 是哪个
- 如果始终加载最大图，大概率是 sizes 写成了固定值（如 "100vw"），或 CSS 把容器撑到了全屏
真正的降级无错，不靠猜测，只靠 currentSrc 值、Network 响应体、和 Computed width 三者对齐。少一个，就可能在某个安卓 WebView 里突然白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
