静态图片降级必须依赖html结构兜底：src须指向真实占位图（如1px gif/lqip），data-src仅作增强且需静态声明于html中；picture内img的src须为最终fallback并配onerror；首屏关键图禁用懒加载；降级逻辑应在构建或ssr阶段验证，而非上线后补救。
静态图片的降级规则不是靠 JS 补救，而是靠 HTML 结构本身兜底——src 必须始终可用，data-src 只能是增强项，不能是唯一来源。
src 必须指向一个真实可加载的占位资源
浏览器不支持 loading="lazy" 或 JS 加载失败时，它不会尝试读取 data-src，只会原样请求 src。如果 src 是空、src="#"、src="data:"（无内容）或路径 404，就会白屏。
-
src应该是 1px GIF、LQIP 模糊图、或 SSR 渲染出的真实小图（如/img/placeholder-20x15.jpg） - 绝不能写成
src=""、src="javascript:void(0)"或依赖 JS 注入 - 服务端需确保这个占位图在断网时也能通过本地缓存或内联方式命中
data-src 是静态声明，不是 JS 动态生成
很多团队把 data-src 放在 JS 里拼接，比如 img.dataset.src = '/uploads/' + id + '.jpg' —— 这在断网或 JS 报错时直接失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
data-src必须在 HTML 源码中静态存在：<img src="/img/placeholder.jpg"> - 这样即使 JS 完全没执行，开发者也能手动用 DevTools 查看并验证路径是否有效
- 若需动态生成，应在 SSR 阶段完成，而非客户端 JS
picture 标签里不能只靠 onerror 回退到 img.src
<picture></picture> 中的 <source></source> 加载失败不会触发 <img> 的 onerror，因为 error 事件不冒泡，也不监听 source。
-
onerror只对<img src="...">的 src 失败生效，对<source srcset="..."></source>无效 - 若所有
<source></source>都指向无效地址，而<img>的src又为空，结果就是空白容器 - 正确做法：保证
<img>的src是最终 fallback 地址，并加onerror="this.src='/fallback.jpg';this.onerror=null;"
关键图片必须跳过懒加载逻辑
首屏商品主图、Banner 头图、登录头像等，不该参与任何降级链路——它们的加载确定性高于一切优化。
- 直接写死
src，不设loading="lazy"，不加data-src - 避免用
display: none初始隐藏再 JS 显示：Safari 和多数 WebView 会彻底跳过 lazy 图片，且 display 切换后也不会重新触发加载 - 如果要用 CSS 控制显隐，选
opacity: 0或visibility: hidden，它们不影响加载时机
最容易被忽略的一点：降级不是“JS 失效了就靠 HTML”，而是“HTML 从一开始就没给 JS 留下失效空间”。占位图路径是否真能访问、data-src 是否已写死在源码里、<picture></picture> 的 <img> 是否有兜底——这些都得在构建阶段或 SSR 输出时确认，而不是上线后靠监控报警去补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
