fallback未显示是因为data路径写错时浏览器不发起请求，仅当请求发出且失败（如404、mime不匹配）时才触发；空值、非法url、相对路径拼错均导致静默白屏。
data路径写错时，fallback为什么没显示
因为object>的fallback只在「请求发出且失败」时触发，不是「路径无效」时。data值为空、非法URL（如data=" "）、相对路径拼错（如data="../pdfs/report.pdf"但实际在/docs/下），浏览器根本不会发请求——既无网络错误，也不进fallback，只留白。
常见误判场景：
-
data="file://local/doc.pdf"：现代浏览器静默拒绝，控制台无提示 -
data="report.pdf?name=张三"：中文未URL编码，部分浏览器截断或返回400，不触发fallback -
data="./assets/chart.svg"但HTML部署在子路径（如/app/index.html）：相对路径解析为/app/./assets/chart.svg，而资源实际在/assets/，结果404但fallback仍不显示（除非服务端返回404响应）
如何让路径错误也能触发fallback
唯一可靠方式是确保data指向一个真实可访问的URL，并依赖服务端返回明确的失败响应（如404）或类型不匹配（如返回text/html但type="application/pdf"）。本地开发必须用HTTP服务，不能双击打开file://页面。
实操建议：
- 用
npx http-server -p 8080启动本地服务，统一以/为根路径引用资源 - 缓存或构建阶段校验路径：把
ASSETS_TO_CACHE数组和HTML中data值做字符串比对，避免手误 - 加
typemustmatch属性强制校验MIME类型，哪怕服务端返回application/octet-stream也会退到fallback - fallback内容必须是合法HTML节点，比如
<p>图表加载失败，请刷新重试</p>，不能是纯文本或注释
相对路径 vs 绝对路径怎么选
相对路径易出错但适合静态部署；绝对路径（以/开头）更可控，但要求所有资源都按网站根目录结构组织。
关键区别：
-
data="chart.svg"：相对于当前HTML URL，部署到子目录时容易断 -
data="/chart.svg"：始终从域名根开始找，需确认服务器静态文件路由支持（如Nginx配置location / { try_files $uri =404; }） -
data="https://cdn.example.com/chart.svg"：必须配CORS头，否则渲染被拦截，但fallback仍可触发（前提是CORS错误导致响应不可用）
推荐做法：开发期全用/xxx绝对路径，配合<base href="/">统一基准，避免嵌套层级干扰。
服务端响应头不匹配导致路径“看似正确”实则失效
data路径能访问、返回200，但fallback仍不出现？大概率是服务端没返回正确的Content-Type。比如PDF文件被Nginx默认设为application/octet-stream，Chrome就拒绝内嵌，直接下载——此时fallback也不会显示，因为浏览器认为“加载成功但行为是下载”。
必须检查并修正：
- PDF服务端响应头必须含
Content-Type: application/pdf - SVG需返回
Content-Type: image/svg+xml，写成text/xml或application/xml会导致部分浏览器不渲染 - 用curl验证：
curl -I https://yoursite.com/report.pdf，看Header输出 - 若用Webpack/Vite，静态资源插件可能覆盖MIME类型，需显式配置
setHeaders或headers选项
最隐蔽的坑：本地http-server默认不设PDF MIME类型，必须加-c-1参数并手动指定.pdf=application/pdf，否则永远 fallback 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
