本地图片降级必须确保src指向真实可访问的本地文件，统一用正斜杠和./相对路径；双击打开时onerror不触发，因file://协议下路径解析失败不发请求，onerror仅响应HTTP层失败。
本地图片降级不能只靠 onerror，必须让 src 指向一个真实可访问的本地文件，且所有格式路径必须一致、全用正斜杠、相对路径以 HTML 文件为基准。
为什么双击打开 HTML 时 onerror 总不触发
浏览器对 file:// 协议限制极严：onerror 只响应 HTTP 请求失败（如 404、网络中断），但本地双击打开时：
-
src="logo.png"路径解析失败（没找到文件）→ 不发请求 →onerror静默 -
src="./logo.png"更可靠，明确表示“同目录下” -
src="images/logo.png"和src="images\logo.png"效果不同：Windows 显示反斜杠，但 HTML 只认正斜杠/ - 绝对路径如
file:///C:/project/logo.png理论可行，但换电脑就失效，开发阶段禁用
<picture></picture> 在本地环境必须显式写 img 兜底且路径有效
<picture></picture> 不是“自动选图”，它依赖浏览器逐个尝试 <source></source>，最后 fallback 到内部 <img alt="HTML本地图片怎么配置降级策略" > 的 src。本地环境下，这个 src 必须真实存在：
- 错误写法：
<img src="missing.jpg" alt="logo">→ 文件不存在 → 整个<picture></picture>渲染为空白（只剩alt文本，且部分浏览器连alt都不显示） - 正确写法：
<img src="./logo.png" alt="公司 logo">，且确保该文件和 HTML 在同一目录 - 所有
<source></source>的srcset路径也必须可访问，比如<source srcset="./logo.avif" type="image/avif"></source> - AVIF/WebP 图在 Safari ≤13.1 或旧 Android WebView 中会静默留白——不是加载失败，而是根本不识别格式，所以
<img alt="HTML本地图片怎么配置降级策略" >兜底是唯一出路
本地开发时怎么验证降级是否真生效
别只看页面显示正常。双击打开 HTML 后，需手动验证每层是否兜得住：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 删掉
./logo.png，刷新页面 → 应看到alt文字（前提是<img alt="HTML本地图片怎么配置降级策略" >的src确实指向它） - 把
<img src="./logo.png" alt="HTML本地图片怎么配置降级策略" >改成<img src="" alt="HTML本地图片怎么配置降级策略" >→ 页面空白，alt不出现（src为空 = 无加载意图） - 打开 Chrome DevTools → Network 面板 → 刷新 → 查看是否有
Failed to load resource，并确认失败的是哪一层（source还是img） - 临时重命名
logo.avif为logo-broken.avif，观察是否顺利 fallback 到logo.png
最易被忽略的本地路径细节
本地开发时，路径错一个字符、少一个点、斜杠方向反了，都会导致整套降级失效：
-
../images/logo.png表示上一级目录里的images文件夹；..images/logo.png是错的（缺少/） - 所有路径统一用
./开头，避免歧义：./logo.png、./images/icon.svg - SVG 占位图优先用
data:image/svg+xml;base64,...内联，彻底规避路径问题，例如：<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibGlnaHRncmV5Ii8+PC9zdmc+" onerror="this.onerror=null;this.src='data:image/svg+xml;base64,...'" alt="HTML本地图片怎么配置降级策略" > - 如果用 JS 动态生成
<picture></picture>，必须确保所有路径字符串拼接正确，且在document.body.appendChild()前绑定onerror
本地图片降级真正的难点不在语法，而在路径的确定性——它不经过服务器路由重写或 CDN 透传，每个斜杠、每个点、每个文件名都得和磁盘里一模一样。稍有偏差，浏览器就直接放弃，连错误提示都不给。
