浏览器始终以当前html文档url为基准解析data属性的相对路径，如页面地址为https://example.com/app/report.html，则data="chart.svg"被请求为https://example.com/app/chart.svg。
data 属性填相对路径时，浏览器按什么规则解析？
浏览器始终以当前 HTML 文档的 URL 为基准解析 data 的相对路径，不是按 JS 执行位置、不是按 CSS 文件位置、也不是按服务器文件系统结构。比如页面地址是 https://example.com/app/report.html，那么 data="chart.svg" 会被请求为 https://example.com/app/chart.svg；而 data="../assets/doc.pdf" 则对应 https://example.com/assets/doc.pdf。
常见错误现象包括：本地双击打开 HTML（file:// 协议）时路径看似正常，但部署到 HTTP 服务后 404；或构建工具（如 Webpack/Vite）重写了静态资源路径，却没同步更新 data 值。
- 必须确保相对路径前不加斜杠——
data="/assets/file.svg"是绝对路径（从域名根开始），data="assets/file.svg"才是相对路径 - 路径中不要混用 Windows 风格反斜杠
\，一律用正斜杠/ - 如果 HTML 被服务端模板渲染（如 Spring MVC 的
WEB-INF/mustache/），需确认最终响应的 HTML URL 和资源 URL 是否在同一上下文路径下；否则得用data="${contextPath}/assets/file.svg"这类服务端变量补全
为什么相对路径在开发环境能跑，上线就 404？
根本原因在于「开发预览方式」和「生产部署路径」不一致。最典型的是：用 VS Code Live Server 或 python -m http.server 启服务时，HTML 在根路径（/index.html），但上线后可能部署在子路径如 /admin/dashboard.html，此时 data="img/logo.png" 就会错配成 /img/logo.png 而非 /admin/img/logo.png。
另一个隐蔽问题是构建工具自动哈希文件名（如 chart.a1b2c3.svg），但 data 值仍是写死的 "chart.svg"，导致请求 404。
- 避免硬编码路径：用构建插件（如 Webpack 的
html-webpack-plugin）自动注入正确路径，或把资源路径提取为配置项 - 上线前务必检查 Network 面板里
object发起的请求 URL 是否符合预期，别只看控制台有没有报错 - 若必须支持多级子路径部署，优先用
data="./assets/file.svg"（显式声明“相对于当前页”），比不带./更可预测
type 属性对相对路径加载有影响吗？
没有。type 不参与路径解析，也不决定是否发起请求。它只在资源成功加载后，和响应头中的 Content-Type 做匹配，影响浏览器是否尝试内嵌渲染。也就是说：data="report.pdf" 无论 type 写不写、写对写错，只要 URL 可访问且返回 PDF 内容，就会触发 PDF 查看器（或下载）；如果返回 404，type 再准也进不了 fallback。
但有个实际干扰点：某些旧版浏览器（如 IE）曾依赖 type 触发 ActiveX 插件，现代浏览器已无视这点。现在唯一值得写 type 的场景，是让 PDF 或 SVG 等类型在响应头模糊时（如返回 application/octet-stream）提高 fallback 触发概率。
- PDF 必须写
type="application/pdf"，漏掉或写成type="pdf"会导致 Chrome/Firefox 拒绝内嵌 - SVG 推荐写
type="image/svg+xml"，虽不影响加载，但能避免 Safari 把 SVG 当作普通图片处理（丢失交互能力） - 不要为了“看起来规范”而乱填
type，比如data="icon.png"却配type="image/svg+xml"，这会人为制造 type 不匹配，强制 fallback
fallback 内容为何不显示，即使相对路径 404 了？
fallback 不显示，往往不是路径问题，而是 DOM 结构或协议限制导致浏览器根本没走到“加载失败”这一步。最常被忽略的三点：
-
data值为空、空格或非法字符（如data=""、data=" "、data="javascript:void(0)"）→ 浏览器静默忽略，不发请求，也不渲染 fallback - 用
file://协议本地预览 → 现代浏览器直接阻止请求，控制台无错误，fallback 不触发（必须用http://localhost启服务） - fallback 内容本身不是有效子节点 → 只有
<p></p>、<img>、<object></object>这类可渲染元素才算；纯文本、注释、<script></script>或空格都不行
真正可靠的 fallback 结构是：<object data="chart.svg" type="image/svg+xml"><img src="chart-fallback.png" alt="图表不可用"></object>。其中 <img> 是真实 DOM 节点，且自身 src 也应是相对路径（并同样遵循上述解析规则）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
