object 标签需同时满足 data 为合法 url、type 为正确 mime 类型（如 application/pdf）、设置 width/height 属性，且 fallback 必须为有效子节点，否则将白屏或静默忽略。
data 属性必须填且必须合法，否则不发起请求
浏览器只在 data 属性存在且值为可解析 URL 时才尝试加载资源。空字符串、空格、javascript:void(0)、非法中文路径（如 report.pdf?name=张三 未编码）都会导致静默忽略——既不报错，也不渲染 fallback。
-
data="report.pdf"：相对路径，需确保 HTML 当前 URL 与该路径能正确解析（比如页面在/admin/，实际 PDF 在/static/report.pdf就会 404） -
data="./static/report.pdf"：显式以./开头更可控，避免被构建工具或服务器路由误处理 -
data="https://cdn.example.com/doc.pdf"：跨域需服务端返回Access-Control-Allow-Origin，否则渲染被拦截（控制台无错误，仅白屏） -
data="data:application/pdf;base64,JVBERi..."：Base64 内联 PDF 完全规避路径和 CORS 问题，但体积大，仅适合小文件
type 属性不是可有可无，它影响 fallback 触发时机
type 不决定是否发起请求，但它参与 MIME 协商。现代浏览器主要依赖服务端响应头里的 Content-Type，但写对 type 能提升 fallback 的可靠性，尤其在 PDF 场景下。
- PDF 必须写
type="application/pdf"—— 写成"pdf"、"text/pdf"或留空，Chrome/Firefox 可能直接跳过内置 PDF 查看器，退到 fallback - SVG 推荐写
type="image/svg+xml"，虽非强制，但配合typemustmatch可防止 HTML 被误当 SVG 渲染 - 图像类资源（如 JPG/PNG）通常不用
object，但若要用，type="image/jpeg"等值有助于 fallback 在响应头不匹配时更快激活 - 加
typemustmatch属性后，若服务端返回的Content-Type与type不一致，浏览器将强制 fallback（哪怕资源已加载成功）
width 和 height 是显示前提，CSS 不完全可靠
没设 width 和 height 属性时，浏览器默认渲染为 0×0 区域，结果就是白屏——fallback 也不会出现，因为资源“加载中”，只是看不见。
- 优先用内联属性：
width="800" height="600"，比 CSS 更早生效，避免 FOUC 或布局抖动 - 若需响应式，至少保留一个固定尺寸（如
height="600"），再用style="width: 100%; max-width: 100%;" - 不要只写
style="width: 100%; height: 600px;"而省略属性，某些旧版 Safari 和 IE 会忽略纯 CSS 尺寸 - 对 PDF，建议最小高度设为
500以上，否则部分 PDF 查看器 UI 元素（如翻页按钮）会被裁剪
fallback 内容必须是有效子节点，不能靠注释或空格撑场
只有当资源加载完成但无法渲染时，浏览器才会展示 object 标签内的内容。如果 fallback 是纯文本、HTML 注释、空格或 <script></script>，它不会被当作有效后备呈现。
- 推荐结构：
<p>PDF 加载失败</p> <img src="fallback-chart.png" alt="图表截图">——<p></p>和<img>都是合法子节点 - 嵌套另一个
<object></object>也合法，比如降级到 SVG 再降级到 PNG：<object data="chart.svg" type="image/svg+xml"><img src="chart.png"></object> - 绝对不要写：
<!-- 备用图 --><img ...>—— 注释不算子节点，<img>会被当作主内容的一部分，而非 fallback - 必须写闭合标签：
<object data="x.pdf">...</object>，漏掉会导致后续 DOM 解析错乱，fallback 被丢弃
真正容易被忽略的是：路径、type、响应头三者必须严格一致才能稳定渲染 PDF；而 fallback 的“生效条件”比多数人想的更苛刻——它不响应网络超时或 JS 阻塞，只响应明确的加载完成但处理失败。写完 object 后，务必用 DevTools 的 Network 面板确认请求返回了 200 + 正确的 Content-Type。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
