img标签失效时浏览器只加载src，src不可用则仅显示alt文本；确保src指向真实可加载资源，禁用空值、错误路径及相对地址，cdn占位图和内联onerror是可靠兜底方案。
img 标签失效时，浏览器不会自动切到 data-src、srcset 或 <source></source>，它只管加载 src；如果 src 本身不可用（空、路径错、404、跨域拦截但没 crossorigin），最终就只剩 alt 文本——这不是“降级”，是内容丢失。
确保 src 永远指向一个真实可加载的资源
80% 的“图片白屏”源于 src 本身失效：比如写成 src=""、src="avatar.jpg"（但文件实际不存在）、或动态地址如 src="/api/image?uid=123"（断网即挂）。这些情况下，onerror 都不触发。
- 推荐用 CDN 托管的静态占位图：
src="/img/placeholder.svg"或src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjZGRkIi8+PC9zdmc+" - 绝对禁止
src="#"、src="./images/xxx.jpg"（部署后因路由重写失效）、src="" - SSR 渲染时，
src值必须由服务端直接写出，不能依赖客户端 JS 注入
<picture></picture> 中的 <img> 不是“备用”，而是最终渲染载体
<picture></picture> 不是“多选一”，而是“匹配 → 加载 → 失败则继续尝试 <img>”。如果所有 <source></source> 都失败，浏览器仍会加载 <img src="..."> —— 它的 src 必须独立可用，否则整块退化为纯文本。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<source></source>必须按格式支持强度从强到弱排列：type="image/avif"→type="image/webp"→ 最后才是<img> -
<img>是必需子元素，不是第 N 个<source></source>；它的src不能带查询参数，不能是相对路径错误的地址 - IE 或旧 WebView 会忽略整个
<picture></picture>，只渲染<img>—— 这反而是优势，前提是你的<img src>真的能加载
onerror 必须内联写，且立即切断事件链
动态绑定 img.onerror 在 Safari 和旧 Edge 中大概率不触发；document.addEventListener('error') 也捕获不到（它不冒泡）。唯一可靠的是 HTML 内联写法，而且不加防护就会死循环。
- 基础写法：
onerror="this.src='/img/fallback.png'; this.onerror=null" - 更稳妥写法：
onerror="if (!this.src.includes('fallback')) this.src='/img/fallback.png'; this.onerror=null" - 如果连 fallback 图都不可信，直接用 base64：
onerror="this.src='data:image/png;base64,iVBORw0KGgo...'; this.onerror=null" - 注意：该属性只能用于
<img>，对<source></source>无效；且在<picture></picture>中，它只作用于最外层<img>
轮播图、懒加载等复杂场景要分层兜底
轮播图禁用 JS 后不会自动显示首图；loading="lazy" 不被支持时也不会读取 data-src。它们的降级不是靠单点补救，而是结构上预埋多层确定性。
- 轮播容器里，第一张图必须用标准
<img src="...">写死在 HTML 中，带alt；其余图片只存data-src或由 JS 动态插入 -
loading="lazy"+data-src白屏的根本原因是：不支持该属性的浏览器只加载src，若此时src为空或错误，就彻底没图。可靠做法是让src指向 LQIP 或 1px GIF，data-src存高清图地址，且必须静态写在 HTML 中 - 关键图片（如商品主图、头图）跳过懒加载：直接写死
src，不加loading="lazy"，也不设data-src - CSS 层也要配合：避免用
display: none包裹图片容器（Safari 会跳过加载），宽高或aspect-ratio必须设置，否则布局塌陷
最容易被忽略的不是 JS 怎么写，而是 src 是否真能加载、<img> 是否真被当作兜底、CSS 是否悄悄屏蔽了渲染机会——降级不是补丁，是每个环节都默认按“可能失效”来设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
