标签中data属性需与type配合使用才能可靠加载内容，仅设data或type均会导致兼容性问题或静默失败；不同mime类型对响应头、路径、cors等有特定要求，fallback内容应具备实际兜底能力。
data 属性是 <object></object> 标签中决定“加载什么内容”的核心，但它不是万能的 URL 透传字段——浏览器是否真正发起请求、是否成功渲染，取决于 type 是否匹配、MIME 类型是否被支持、资源是否可访问，以及降级逻辑是否写对。
为什么设置了 data 却什么都没显示？
常见现象：HTML 写了 <object data="chart.svg"></object>，但页面空白，控制台无报错，Network 面板里也看不到请求发出。
-
data值为空、相对路径拼错（比如漏了./或多写了斜杠）、跨域资源未带 CORS 头，都会导致静默失败 - 没配
type属性时，部分浏览器（尤其是旧版 Safari 和 IE）会直接跳过加载，不触发任何请求 -
type值写错（如把image/svg+xml写成image/svg），浏览器识别为未知类型，也不加载 - 资源返回 HTTP 状态码非 2xx（如 404、403），
<object></object>不报错，只转去渲染 fallback 内容（如果写了的话）
data 和 type 必须成对出现吗？
规范上只要求二者至少设其一，但实际使用中，**必须同时设置 data 和 type 才具备可预测行为**。
- 只设
data：Chrome / Firefox 可能靠文件扩展名推测类型（如.pdf→application/pdf），但 Safari 和 Edge 不保证，行为不可控 - 只设
type：浏览器无数据源，直接跳到 fallback，等同于空标签 - 推荐写法：
<object data="report.pdf" type="application/pdf" width="800" height="600"><p>PDF 加载失败，请@#@#@#@#@#@#@#@#@#@0</p></object>
不同资源类型对 data 的实际要求
data 的值本身没有格式限制，但不同 MIME 类型对资源响应头、协议、路径有隐含约束：
-
image/*（如image/png）：支持相对路径、data:URI、同源 HTTPS；但不支持跨域图片（除非服务端返回Access-Control-Allow-Origin） -
application/pdf：现代浏览器基本原生支持，但 PDF 文件需以application/pdf响应头返回；若后端返回text/plain，即使后缀是 .pdf，也会加载失败 -
text/html：可用于内嵌同源页面（<object data="/sidebar.html" type="text/html"></object>），但注意该页面的 JS/CSS 是隔离执行的，无法直接访问父页面 DOM -
image/svg+xml：支持内联 SVG（data="data:image/svg+xml;base64,..."），但需确保 base64 字符串已正确编码（空格、等需转义）
容易被忽略的兼容性细节
最常踩的坑不在语法，而在“fallback 内容是否真能兜住”：
- fallback 不只是文字 —— 它可以是完整 HTML 片段，比如一个
<img>、一段<script></script>动态加载逻辑，甚至嵌套另一个<object></object>尝试备用路径 -
typemustmatch属性（布尔值）一旦启用，浏览器会严格校验响应头Content-Type是否与type完全一致，不匹配就跳 fallback —— 这对调试很有用，但上线前务必确认后端配置 - 某些企业内网环境禁用插件或 PDF 预览，此时即使
data和type都正确，也会直接走 fallback，不能只靠视觉判断是否生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
