中不显示是因为它仅在无匹配时触发，而非所有加载失败时兜底；必须为添加onerror并设this.onerror=null防止循环调用。

图片优雅降级不是“加个 alt 就完事”，而是确保在图片加载失败、JS 禁用、网络中断、浏览器老旧等任一异常场景下，用户仍能获取关键信息或可用替代内容。核心在于分层兜底：HTML 结构兜底、src 和 onerror 兜底、JS 监控兜底，三者缺一不可。

为什么 里的 经常不显示？

的 不是“所有 都失败时的 fallback”，而是“没有任何 匹配媒体条件时的兜底”。如果 media="(min-width: 650px)" 条件满足但对应 srcset 图片 404，浏览器不会跳到 ，而是留白。

• 必须为 单独加 onerror 处理，且设 this.onerror=null 防止循环调用
• 示例写法：
• 不要依赖 自带错误回退——原生不支持

的 src 和 data-src 怎么配合懒加载降级？

只写 loading="lazy" 是危险的：不支持该属性的浏览器会忽略它，但若此时 src 是空值或占位图路径无效，图片就直接白屏。

• src 必须始终指向一个真实可访问资源（如 1px GIF、LQIP 图或 SSR 渲染出的小图）
• data-src 存高清图地址，且必须静态写死在 HTML 中，不能靠 JS 动态注入
• 关键图片（如首屏主图）应跳过懒加载：loading="eager" 或直接写死 src，不设 data-src
• 断网时，JS 可能根本没执行，所以 src 的可用性必须独立于 JS

能当图片降级容器用吗？

不能。 只在浏览器 JS 引擎被明确禁用（如 Firefox 设置 javascript.enabled = false）时才生效，对 JS 加载失败、CSP 拦截、404 报错、断网等情况完全无响应。

DeepBI DHTML 页面生成器

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

下载

• 把 放在 JS 渲染区域后面，内容必须是原生可用的 HTML：，不能含 onclick 或依赖 JS 的 class 切换
• 路径必须用绝对路径或内联 base64，相对路径在 JS 禁用时可能因解析上下文缺失而 404
• SSR/SSG 是前提：纯 CSR 应用（如默认 CRA）初始 HTML 为空， 写了也白写

图片加载失败怎么快速定位和批量修复？

开发阶段光看 alt 文字无法区分是路径写错、服务器挂了，还是图片真缺失。得靠运行时检测。

• 控制台一行命令查所有失败图片：Array.from(document.images).filter(i => i.naturalWidth === 0)
• 全局监听推荐用 document.querySelectorAll('img').forEach(img => img.addEventListener('error', ...))，避免内联 onerror 的维护成本
• 路径统一用相对路径，从 HTML 文件所在目录算起；避免混用 ./images/ 和 images/，否则入口页位置一变就全崩
• 错误上报可加简单打点：console.warn('[Img Error]', img.src)，配合 sourcemap 定位构建后路径

真正难的不是写 fallback，而是让每层 fallback 都在它该起作用的失效边界上准确触发——比如 onerror 不该管 失败， 不该管断网，loading="lazy" 不该替你保证 src 有效。边界清晰，降级才可靠。

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