最稳无图占位方案是 background: linear-gradient(#eee, #eee)，需配 background-size、no-repeat 和 content-box； 中兜底 必须真实可访问，懒加载 placeholder.png 需尺寸匹配且存在，onerror 防循环。

用 CSS 渐变做无图占位最稳

直接用 background: linear-gradient(#eee, #eee) 替代图片，不发请求、不依赖网络、兼容性比 base64 更好。关键不是“灰”，而是“撑住布局+用户可理解”。

• background-size: 320px 240px 必须和目标图宽高一致，否则拉伸或裁剪
• 一定要加 background-repeat: no-repeat，否则会平铺满整个容器
• 若父容器有 padding，用 background-origin: content-box 确保渐变从内容区左上角起始
• IE9+ 和旧 Android WebView 要求两个颜色参数都写全，linear-gradient(#eee, #eee) 不能简写为 linear-gradient(#eee)

末尾的 才是真正兜底位

很多人以为 只管格式降级（WebP → JPEG），其实它的最后一层 就是默认占位载体——这个 src 必须指向一个真实可访问的资源。

• 别写 或 ，否则所有 失败后只剩 alt 文本，布局塌陷
• 推荐用 CDN 托管的小尺寸 PNG 占位图，如 /assets/placeholder-320x240.png，大小控制在 1–2KB
• alt 仍需准确描述内容，不能空，否则无障碍和 SEO 都失效

懒加载时占位符必须是真实小图

只靠 loading="lazy" 或 JS 控制加载，不代表可以省略占位逻辑。空白 src 或 base64 在部分 Android WebView 中会解析失败，导致容器高度归零。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 结构必须是：
• placeholder.png 必须真实存在、尺寸匹配、支持透明；别用 data:image/png;base64,... 当首屏占位
• JS 加载成功后，要显式替换 src 并移除 lazy 类，否则 IntersectionObserver 可能重复触发

用 onerror 做 fallback 要防循环

常见写法 onerror="this.src='/fallback.png'" 在某些场景下会反复触发：比如 fallback 图也加载失败，就会无限重试。

• 正确写法：onerror="if (this.src !== '/fallback.png') this.src = '/fallback.png';"
• 注意路径必须绝对或相对于当前页面，避免因路由嵌套导致 404
• 该属性仅对 生效， 内部的 不支持 onerror

灰色占位不是视觉装饰，是加载链路上的关键容错点。最容易被忽略的是：渐变背景没配 background-origin 导致 padding 区域也被填充，或者 里兜底 的 src 指向了 404 资源——这时你看到的“方块”，其实是浏览器在告诉你：“我连占位图都加载不了”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！