外部资源加载失败主因是file://协议安全限制，需用Live Server等HTTP服务绕过；路径错误或onerror未防重会加剧问题；base64兜底可避免图片不显示。
外部资源加载失败不是代码写错了，而是路径、协议或安全策略卡住了——直接起本地 HTTP 服务、加 onerror 防死循环、用 base64 兜底图，这三步做完，90% 的“白屏”“报错”“图片不显示”就解决了。
为什么双击打开 HTML 总是加载失败
浏览器对 file:// 协议有严格限制：JS/CSS/图片请求会被拦截，fetch 失效，控制台报 net::ERR_FILE_NOT_FOUND 或 Access to script at 'file:///xxx.js' from origin 'null' has been blocked。这不是你路径写错了，是浏览器故意拦的。
- 别信“路径看着对”——用 DevTools 的 Network 面板点开红色请求，看
Request URL实际发的是什么 - VS Code 装好
ritwickdey.LiveServer插件，右键选Open with Live Server，确保文件已保存且扩展名是小写.html - 临时绕过（仅调试）：Chrome 启动加
--allow-file-access-from-files，但新版已逐步废弃，别依赖
onerror 怎么写才不卡死页面
onerror="this.src='fallback.jpg'" 看似简单，但备用图也 404 就会无限触发，内存暴涨甚至崩溃。必须加防重逻辑，且只对 <img> 和 <video> 生效，对 CSS 背景图无效。
- 稳妥写法：
onerror="if (!this.src.includes('fallback')) { this.src = 'fallback.jpg'; this.onerror = null; }" - 动态创建的
img元素，必须在插入 DOM 前手动赋值onerror，否则可能来不及绑定就已报错 - 全局监听更可靠：
document.addEventListener('error', e => { if (e.target.tagName === 'IMG' && !e.target.dataset.handled) { e.target.dataset.handled = '1'; e.target.src = 'data:image/png;base64,iVBORw0KGgo...'; } }, true)
哪些情况 onerror 根本不触发
不是所有“加载失败”都会进 onerror。它只响应网络层失败（404/403/500），对以下场景完全沉默：
立即学习“前端免费学习笔记（深入）”；
-
src是空字符串、undefined或纯空格 —— 浏览器不发请求，自然没错误事件 - CORS 阻止（比如跨域图片没配
crossorigin）—— 控制台报错，但onerror不触发 - 服务器返回 200 状态码的兜底图（如某些 CDN 的 404 返回占位图）—— 浏览器认为“加载成功”，哪怕内容是“图片不存在”
- 图片文件头正常但数据损坏（如 JPEG 数据块坏）——
naturalWidth === 0可检测，但需额外 JS 判断
视频加载失败怎么换源或提示用户
<video> 的 onerror 和图片类似，但更关键的是多格式 <source> + 显式 poster + 错误码判断。
- 基础写法：
<video controls onerror="handleVideoError(this)"><source src="video.mp4" type="video/mp4"></video> - 处理函数里先设
poster，再替换innerHTML或尝试切换source.src，记得用dataset标记是否已尝试过备用源 - 真正要查的是
videoElement.error.code：1 表示用户中止，2 是网络错误，3 是解码失败，4 是媒体资源不可用 - 如果所有
<source>都失败，videoElement.currentSrc会是空字符串，这时该提示用户或上报日志
最麻烦的不是 404，而是“看起来加载成功了，但画面黑/卡/花”。这类问题没法靠 onerror 捕获，得结合 loadedmetadata、canplay、error 多事件监听，再配合 naturalWidth 和 videoHeight 检查实际解码状态。
