真正可用的“无图模式降级”是提供有意义的替代内容，需写全img的alt和loading属性、合理使用CSS背景图+@supports检测、JS监听error事件主动替换，并确保核心信息在图片不可靠时仍可传达。
图片加载失败时，用户看到的不是空白或断链图标，而是有意义的替代内容——这才是真正可用的“无图模式降级”。它不是靠禁用图片实现，而是靠提前设计 fallback 路径。
img 的 alt 和 loading 属性必须写全
浏览器在图片加载失败、禁用图片、或屏幕阅读器环境下，会依赖 alt 文本作为内容替代。但很多人只把它当 SEO 配件，随便填个“图片”或留空，这就等于主动放弃降级能力。
-
alt必须是简洁、准确的内容描述（如alt="深蓝色帆布托特包正面特写"），不能是“图1”“产品图”这类无意义占位 - 加上
loading="lazy"不仅提升首屏性能，还能让浏览器在不可见区域图片加载失败时，不触发 broken image 渲染逻辑，降低视觉干扰 - 如果图片纯为装饰（比如背景分割线），应设
alt=""，而非省略——省略会让读屏器尝试读取文件名或路径，造成噪音
用 CSS background-image + @supports 检测做视觉降级
当需要图片承载重要视觉信息（如 banner 图、icon），但又不想让 <img alt="HTML图片怎么做无图模式降级" > 的 broken 状态暴露给用户时，可改用 background-image，再配合 @supports (background-image: element(...)) 或更实际的 @supports (aspect-ratio: 1) 做渐进增强。不过更稳妥的做法是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
<div> 包裹关键图区域，设置 <code>background-image同时配background-color（如background-color: #f0f0f0）作为默认底色 - 在 CSS 中用
@supports (background-image: url(""))并不实用，真正可依赖的是@supports (display: grid)这类广泛支持的特性，来判断是否启用高级布局+背景图组合 - 避免把文字直接叠在 background-image 上却不设 contrast fallback；务必加一层半透黑色遮罩或使用
color-scheme: light dark配合系统偏好 - 监听
img元素的load和error事件，出错时插入一段简明文案或 SVG 占位符：img.addEventListener('error', () => { img.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewbox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="12">图文暂不可用</text></svg>'; }); - 不要用
onerror内联属性，它无法捕获 CORS 错误，且不利于统一管控 - 对批量图片（如商品列表），建议用
IntersectionObserver+fetch()预检图片 URL 状态，失败则跳过加载，直接渲染降级结构
JavaScript 主动监听 load/error 并替换内容
仅靠 HTML 和 CSS 无法覆盖所有异常场景（比如图片加载超时、CORS 阻止、CDN 返回 404 但状态码被代理掩盖）。这时候得用 JS 主动干预：
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：无图模式不是“图片没了怎么办”，而是“当图片不可靠时，核心信息是否仍可传达”。很多团队花大力气优化 WebP 加载，却没给 alt 写一句完整句子——这就像给跑车装了氮气加速，却忘了配安全带。
