中不显示是因为它仅在无匹配时触发，而非所有加载失败时兜底；必须为添加onerror并设this.onerror=null防止循环调用。
图片优雅降级不是“加个 alt 就完事”，而是确保在图片加载失败、JS 禁用、网络中断、浏览器老旧等任一异常场景下，用户仍能获取关键信息或可用替代内容。核心在于分层兜底：HTML 结构兜底、src 和 onerror 兜底、JS 监控兜底，三者缺一不可。
为什么 <picture></picture> 里的 <img alt="HTML图片怎么做优雅降级？前端实用技巧分享" > 经常不显示？
<picture></picture> 的 <img alt="HTML图片怎么做优雅降级？前端实用技巧分享" > 不是“所有 <source></source> 都失败时的 fallback”，而是“没有任何 <source></source> 匹配媒体条件时的兜底”。如果 media="(min-width: 650px)" 条件满足但对应 srcset 图片 404，浏览器不会跳到 <img alt="HTML图片怎么做优雅降级？前端实用技巧分享" >，而是留白。
- 必须为
<img alt="HTML图片怎么做优雅降级？前端实用技巧分享" >单独加onerror处理，且设this.onerror=null防止循环调用 - 示例写法：
<img src="fallback.jpg" alt="描述" onerror="this.src='placeholder.svg'; this.onerror=null;"> - 不要依赖
<source></source>自带错误回退——原生不支持
<img alt="HTML图片怎么做优雅降级？前端实用技巧分享" > 的 src 和 data-src 怎么配合懒加载降级？
只写 loading="lazy" 是危险的：不支持该属性的浏览器会忽略它，但若此时 src 是空值或占位图路径无效，图片就直接白屏。
-
src必须始终指向一个真实可访问资源（如 1px GIF、LQIP 图或 SSR 渲染出的小图） -
data-src存高清图地址，且必须静态写死在 HTML 中，不能靠 JS 动态注入 - 关键图片（如首屏主图）应跳过懒加载：
loading="eager"或直接写死src，不设data-src - 断网时，JS 可能根本没执行，所以
src的可用性必须独立于 JS
<noscript></noscript> 能当图片降级容器用吗？
不能。<noscript></noscript> 只在浏览器 JS 引擎被明确禁用（如 Firefox 设置 javascript.enabled = false）时才生效，对 JS 加载失败、CSP 拦截、404 报错、断网等情况完全无响应。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 把
<noscript></noscript>放在 JS 渲染区域后面，内容必须是原生可用的 HTML：<img src="/static/fallback.jpg" alt="...">，不能含onclick或依赖 JS 的 class 切换 - 路径必须用绝对路径或内联 base64，相对路径在 JS 禁用时可能因解析上下文缺失而 404
- SSR/SSG 是前提：纯 CSR 应用（如默认 CRA）初始 HTML 为空，
<noscript></noscript>写了也白写
图片加载失败怎么快速定位和批量修复？
开发阶段光看 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 不该管 <source></source> 失败，<noscript></noscript> 不该管断网，loading="lazy" 不该替你保证 src 有效。边界清晰，降级才可靠。
