最稳无图占位方案是 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)
<picture></picture> 末尾的 <img alt="HTML图片怎么降级为灰色占位框" > 才是真正兜底位
很多人以为 <picture></picture> 只管格式降级（WebP → JPEG），其实它的最后一层 <img src="..." alt="HTML图片怎么降级为灰色占位框" > 就是默认占位载体——这个 src 必须指向一个真实可访问的资源。
- 别写
<img src="" alt="HTML图片怎么降级为灰色占位框" >或<img src="broken.jpg" alt="HTML图片怎么降级为灰色占位框" >，否则所有<source></source>失败后只剩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
- 结构必须是：
<img src="placeholder.png" class="lazy" alt="HTML图片怎么降级为灰色占位框" > -
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
- 该属性仅对
<img alt="HTML图片怎么降级为灰色占位框" >生效，<picture></picture>内部的<source></source>不支持onerror
background-origin 导致 padding 区域也被填充，或者 <picture></picture> 里兜底 <img alt="HTML图片怎么降级为灰色占位框" > 的 src 指向了 404 资源——这时你看到的“方块”，其实是浏览器在告诉你：“我连占位图都加载不了”。 
