断网时图片必须立刻显示占位图或默认图，src须指向真实可访问的静态资源（如/img/placeholder.svg），禁止为空、动态地址或相对路径；SSR需直出src；中是最终渲染载体，onerror须内联并切断事件链。
断网时图片必须立刻显示占位图或默认图，不能依赖 JS、loading="lazy" 或 data-src —— 这些在离线状态下根本不会执行或加载。
src 必须指向一个真实可访问的静态资源
80% 的断网白屏问题，根源是 src 为空、写错、或指向动态地址（如 /api/image?uid=123）。浏览器断网后连请求都发不出，更不会 fallback 到其他属性。
-
src值必须是静态 URL：推荐用 CDN 托管的 SVG 占位图（如/img/placeholder.svg）或业务默认图（如/img/avatar-default.png） - 绝对禁止：
src=""、src="#"、src="./images/xxx.jpg"（本地路径在部署后常因路由重写失效） - SSR 渲染时，
src必须由服务端直接写出，不能等客户端 JS 注入
里 ![]()
的 src 不是“备用”，而是最终渲染载体
src。如果这个 src 本身也 404，结果就是只显示 alt 文本。
-
src必须独立可访问（不能带查询参数，不能是相对路径错误的地址） - IE 或旧 WebView 会忽略整个
- 不要把
onerror 内联写法必须防死循环且立即生效
onerror 不响应空 src、CORS 阻塞、服务器返回 200 占位图等场景 —— 它只管“请求发出后失败”。断网时它能触发，但写法不对就会无限重试。
- 正确写法：
onerror="this.src='/img/fallback.svg'; this.onerror=null" - 更稳妥写法：
onerror="if (!this.src.includes('fallback')) this.src='/img/fallback.svg'; this.onerror=null" - 最保险写法（彻底规避路径风险）：
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2RkZCIvPjx0ZXh0IHg9IjEwMCIgeT0iMTAwIiBmb250LXNpemU9IjE2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNzciPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg=='"; this.onerror=null"
轮播图等动态组件要保障首图原生可见
轮播图禁用 JS 或断网时，不会自动显示某张图 —— 它只是个空容器。必须靠 HTML 原生能力兜底。
- 首张图必须写死在 HTML 中，带
src和alt，确保无 JS 时也能显示 - 其余图片只存
data-src或放在 JS 数组里，不生成真实 - CSS 层面用
:first-child强制首图可见，例如：.carousel-item { opacity: 0; } .carousel-item:first-child { opacity: 1; } - JS 初始化失败时，显式显示首图区域（如
document.querySelector('.carousel-fallback').style.display = 'block'）
真正容易被忽略的是：断网时 src 是否真的能被浏览器解析并加载 —— 这个路径必须不依赖任何运行时环境、不经过任何代理或重写规则、且文件必须真实存在。其他所有降级手段，都是在这个前提下才起作用的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
