超全模态模型 × Harness 升级，升级解锁 ArkClaw，最新支持 DeepSeek-V4 系列与 GLM-5.1
我明白你遇到的问题——用<object>加载PDF时，一旦PDF链接失效、文件损坏，不仅PDF出不来，就连你设置的替代图片也没法正常显示，试过onerror和srcset都没效果，确实挺头疼的。
<object>
onerror
srcset
这其实是因为不同浏览器对<object>的 fallback 内容处理逻辑不一致，很多现代浏览器在PDF加载失败时，并不会自动显示标签内部的替代内容，而是会展示浏览器自带的错误提示。要解决这个问题，我们需要借助JavaScript来手动干预错误状态，下面给你两种可行的方案：
这种方法直接监听<object>的load和error事件，根据加载状态切换显示PDF或替代图片：
load
error
<div id="pdf-wrapper"> <object id="pdf-viewer" data="my_url" type="application/pdf" style="width: 100%; height: 600px;"> <!-- 这里的内容大概率不会自动显示，所以靠JS处理 --> </object> <img id="fallback-img" src="my_alternate_image" alt="PDF无法加载时的替代图片" style="display: none; width: 100%;" > </div> <script> const pdfViewer = document.getElementById('pdf-viewer'); const fallbackImg = document.getElementById('fallback-img'); // 加载失败时切换到图片 pdfViewer.addEventListener('error', () => { pdfViewer.style.display = 'none'; fallbackImg.style.display = 'block'; }); // 确保PDF加载成功时隐藏图片 pdfViewer.addEventListener('load', () => { fallbackImg.style.display = 'none'; }); </script>
这个方案的核心是通过JS捕获<object>的错误事件，主动隐藏PDF容器并显示替代图片，同时用load事件确保正常加载时图片不会显示。
如果不想等到加载失败再处理，我们可以先通过fetch请求检查PDF链接是否可访问、是否为有效PDF文件，再决定渲染PDF还是图片：
fetch
<div id="pdf-container"></div> <script> const container = document.getElementById('pdf-container'); const pdfUrl = 'my_url'; const fallbackImgUrl = 'my_alternate_image'; // 发送HEAD请求检查PDF状态 fetch(pdfUrl, { method: 'HEAD' }) .then(response => { // 检查请求是否成功，且内容类型是PDF if (response.ok && response.headers.get('content-type')?.includes('application/pdf')) { // 创建object标签加载PDF const pdfObject = document.createElement('object'); pdfObject.data = pdfUrl; pdfObject.type = 'application/pdf'; pdfObject.style.width = '100%'; pdfObject.style.height = '600px'; container.appendChild(pdfObject); } else { // 显示替代图片 renderFallbackImage(); } }) .catch(() => { // 请求失败（比如链接失效），直接显示图片 renderFallbackImage(); }); // 封装渲染替代图片的函数 function renderFallbackImage() { const img = document.createElement('img'); img.src = fallbackImgUrl; img.alt = 'PDF无法加载时的替代图片'; img.style.width = '100%'; container.appendChild(img); } </script>
这种方法的优势是提前避免了加载错误的情况，用户不会看到浏览器的错误提示，体验更流畅。
你之前写的<object data="my_url"> <img src="my_alternate_image"> </object>，在很多浏览器中只有当浏览器不支持<object>标签本身，或者不支持application/pdf类型时，才会显示内部的<img>。但如果是PDF链接失效、文件损坏，浏览器认为自己能处理PDF类型，只是加载失败，就不会触发fallback内容的显示，这时候就必须用JS来手动处理。
<object data="my_url"> <img src="my_alternate_image"> </object>
application/pdf
<img>
内容的提问来源于stack exchange，提问作者Aamir Hussain
超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起
模型再升级,30秒超长叙事, 模态参考扩容
模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列
超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列
大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠
