src必须始终指向高可用轻量图（如主站同域1px GIF或LQIP），作为picture fallback和懒加载降级的最终防线，且需设置宽高或aspect-ratio防布局抖动。
src 必须始终指向可用资源，不能留空或写占位符路径
浏览器不支持 loading="lazy" 或 srcset 时，只会加载 src。如果 src 是 ""、"#"、"data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="（1px GIF）但该资源托管在挂掉的 CDN 上，图片就白屏。降级不是“让 src 暂时没用”，而是让它永远能加载出点东西。
推荐做法：
-
src指向一个高可用的轻量图：比如托管在主站同域下的 1px GIF，或 SSR 渲染时注入的真实小图（如 LQIP 或 320px 缩略图） - 避免用第三方图床或未做容灾的 CDN 路径作为
src值 - 对关键图（如商品主图、头图），直接写死高清
src，跳过所有懒加载和降级逻辑
picture + source 的 fallback 不是自动的，img 的 src 就是最终防线
<picture> 中的 <img> 不是“备用选项”，而是渲染链最后一环。所有 <source> 匹配失败（格式不支持、media 不满足、srcset 资源 404），浏览器仍会尝试加载 <img src="...">。若这个 src 也失效，就只剩 alt 文本。
常见错误：
立即学习“前端免费学习笔记（深入）”；
-
<img src="broken-thumb.jpg">—— 一旦该图 404，整个<picture>退化为纯文字 -
<source type="image/webp">后没配srcset，只写了src—— 浏览器无法解析，跳过该<source>，但不会报错 - 把
<img>当作“兜底占位”，却没给它设宽高或aspect-ratio，导致加载前容器塌陷
正确写法：<img src="/fallback.jpg" alt="风景照">，且确保 /fallback.jpg 在主站静态目录下、HTTP 状态码 200、尺寸可预测。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
loading="lazy" 降级失败，本质是 JS 依赖太重
只加 loading="lazy" 却指望 data-src 自动生效，等于把降级权交给浏览器兼容性。不支持该属性的浏览器（如 Safari 14.1 以下、旧版 Android WebView）会忽略 data-src，只加载 src —— 若此时 src 是占位图或为空，用户看到的就是空白。
可靠方案必须包含三重保障：
- 内联初始化代码：
<script>if ('IntersectionObserver' in window) { /* observer 初始化 */ } else { document.querySelectorAll('img[data-src]').forEach(i => i.src = i.dataset.src); }</script> -
data-src必须静态存在于 HTML 源码中，不能靠 JS 动态注入（断网时 JS 根本不执行） - 禁用
display: none包裹懒加载容器 —— Safari 和多数 WebView 会直接跳过该元素，后续显示也不触发加载
宽高缺失或 aspect-ratio 未设，会让降级视觉体验崩塌
即使图片成功加载，若容器没有预设尺寸，加载瞬间会引发布局抖动（layout shift）。用户滚动时看到内容突然下移，感知就是“卡顿”或“错乱”，尤其在弱网下更明显。
这不是 JS 能修的，必须从 HTML/CSS 层解决：
- 为所有
<img>设置width和height属性（非 CSS），浏览器可据此计算 intrinsic size - 现代写法优先用
aspect-ratio: 16/9，配合width: 100%，兼容性足够（Chrome 88+、Firefox 89+、Safari 15.4+） - 若需兼容老浏览器，用 padding-top 百分比 hack，但必须确保父容器有明确 width
最易被忽略的一点：服务端渲染（SSR）时，如果只输出 <img > 而没给 src 和宽高，首屏直出就是塌陷容器 —— 这个坑 JS 再怎么补也救不回初始体验。
