alt 是唯一真正生效的占位内容，因其是 HTML 规范强制定义、浏览器原生支持的降级通道，能在加载失败时渲染文本、供读屏朗读、被搜索引擎索引，而其他方案如 title、onerror、CSS 伪元素等均无法可靠覆盖所有失效场景。
图片降级占位内容不是“加个灰色方块”或“写个 alt 就完事”，而是必须让浏览器在加载失败、断网、CORS 拦截、空 src 或 200 占位图等所有常见失效路径下，仍能稳定撑住布局、不触发额外请求、且用户可理解——alt 是唯一被 HTML 规范强制赋予降级语义的属性，其余都只是辅助。
为什么 alt 是唯一真正生效的占位内容
alt 是浏览器原生支持的降级通道：当图片加载失败（404、跨域拦截、禁用图片、解析错误），它会直接渲染为可见文本；屏幕阅读器朗读它；搜索引擎索引它。而 title 只是悬停提示，loading="lazy" 不参与占位，onerror 甚至可能完全不触发（比如 CORS 拦截或服务器返回 200 状态的占位图）。
-
alt必须是非空、准确、简洁的描述，不能是alt="图片"或alt=""（除非图纯装饰） - 装饰性图片应设
alt=""，而非省略——否则屏幕阅读器会读出文件名或“image”，违反 WCAG - 不要指望 CSS
::after或伪元素模拟占位内容：它们无法被无障碍设备识别，也不在 DOM 失效时自动接管
img 的 src 必须指向真实可用资源，否则 alt 无法触发
alt 只在“加载失败”时生效，但很多情况根本没走到加载阶段：src=""、src="#"、src="broken.jpg"（路径不存在导致未发请求）都会让浏览器跳过加载逻辑，alt 完全不显示——页面只剩空白或默认图标。
- 首屏关键图的
src必须写死为真实可访问地址，如/assets/hero-320w.jpg，不能是占位符路径或 base64 - 若用
src就是最终兜底，它必须存在、可加载、尺寸匹配 - 避免
src="data:image/svg+xml;base64,..."做主图占位：Base64 过大会阻塞 HTML 解析，且无法 CDN 缓存
用 CSS 渐变做视觉占位，但绝不替代 alt
CSS 占位解决的是布局抖动（CLS）问题，不是语义降级。它和 alt 各司其职：一个保结构，一个保语义。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐写法：
background: linear-gradient(#eee, #eee); background-size: 320px 240px; background-repeat: no-repeat; background-origin: content-box; -
background-size必须与目标图宽高一致，否则拉伸或裁剪；两个相同颜色是为兼容 IE9+ 和旧 Android WebView - 必须配合
aspect-ratio: 16/9（现代）或回退height: 0; padding-bottom: 56.25%（Safari ≤15.3），否则容器塌陷，文字上推 - 这个渐变只是视觉补位，
alt仍是用户和机器唯一能读到的“内容”
动态图或轮播首图必须静态写入 alt + src
轮播、JS 加载图、懒加载图，一旦 JS 失败或被禁用，浏览器不会自动 fallback 到第 N 张——它只渲染 HTML 里写的那一张。所以第一张必须真实存在于初始 HTML 中。
- 轮播容器内，第一张图用标准
- 后续图只存
data-src或 JS 数组，不生成真实src，避免无 JS 时一堆破碎图标 - 如果用
onerror补救（如onerror="this.src='/fallback.jpg'"），务必加防循环：onerror="if (this.src !== '/fallback.jpg') this.src = '/fallback.jpg';"
最易被忽略的点：很多人花精力调 srcset、sizes、alt 留空或写成无效值——结果所有降级努力都在加载失败那一刻归零。占位内容的可靠性，永远从 alt 的真实性开始，而不是从 CSS 或 JS 开始。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
