src属性是最终降级防线，浏览器在srcset加载失败或不匹配时回退至此；它必须指向真实可访问、兼容性高、轻量的图（如800w主图或LQIP），不可为空、占位或无效路径。

srcset 本身不降级，它只提供候选资源；真正起降级作用的是 src 属性——浏览器在所有 srcset 项加载失败或不匹配时，会回退到 src 指向的图。省心的关键是让 src 始终可用、兼容、轻量。

srcset + sizes 配错就白忙活

只写 srcset 不配 sizes，或者 sizes 写成固定值如 "100vw"，浏览器会按视口宽度估算渲染宽度，大概率选中 1200w 或 2x 图，哪怕用户用的是 320px 宽的低端手机。

• sizes 必须反映图片**实际渲染宽度**，不是容器 CSS 宽度；常见写法：sizes="(max-width: 768px) 100vw, 50vw"
• srcset 中所有项必须统一用 w 描述符（如 photo-400.jpg 400w），混用 x 和 w 会让浏览器忽略整个列表
• 若用 x 描述符（如 photo.jpg 1x, photo@2x.jpg 2x），则无需 sizes，但无法适配不同视口宽度

src 是最终防线，不能凑合

src 不是“备选”，而是所有不支持 srcset 的旧浏览器（如 IE11）和所有加载失败场景下的唯一兜底。它一旦失效，就是白屏或 alt 文字裸露。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 务必保留 src 属性，且指向一个真实可访问的图：推荐 CDN 托管的 800w 主图，或主站同域下稳定的 LQIP / 1px GIF
• 避免 src=""、src="#"、src="data:image/gif;base64,..." 等不可缓存或易挂路径
• 不要把 src 当占位符——它得能在浏览器地址栏直接打开并返回 200

别指望 srcset 自动 fallback 到 WebP/JPEG

srcset 只管分辨率/DPR 选择，不管格式兼容性。写 srcset="a.webp 1x, a@2x.webp 2x"，Safari ≤13.1、IE、老 Android WebView 会直接卡住，不发请求也不显示 src 图。

• WebP/AVIF 降级必须用 ，srcset 仅用于同一格式内的响应式变体
• 如果硬要用 srcset 塞 WebP，必须确保 src 指向 JPEG/PNG，且该图尺寸、构图与 WebP 一致，否则切换时拉伸或偏移
• CDN 动态转码（如 photo.jpg?format=webp）不可靠：不支持 AVIF 的浏览器可能收到 406 或损坏二进制，照样白屏

容易被忽略的布局抖动源

没设宽高或 aspect-ratio 是最隐蔽的体验断点。图片加载前若未预留空间，加载完成瞬间会撑开容器，导致文字跳动、按钮位移、CLS 飙升。

• 必须为 显式设置 width 和 height，或用 CSS 设置 aspect-ratio
• 若用 srcset + sizes，建议按最大可能渲染尺寸设宽高，或用 aspect-ratio: calc(16 / 9) 这类动态计算
• 避免用 display: none 包裹图片容器——Safari 和多数 Android WebView 会跳过该元素，后续显示也无效

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