图片加载失败主因是路径、协议或安全策略问题，而非代码错误；应启用本地HTTP服务绕过file://限制，为img添加带防重逻辑的onerror处理，并用base64图片兜底。
图片加载失败不是代码写错了，而是路径、协议或安全策略卡住了——直接起本地 HTTP 服务、加 onerror 防死循环、用 data:image/png;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 根本不触发
它只响应网络层失败（404/403/500），对以下场景完全沉默：
立即学习“前端免费学习笔记（深入）”；
-
src是空字符串、undefined或纯空格 —— 浏览器不发请求，自然没错误事件 - CORS 阻止（比如跨域图片没配
crossorigin）—— 控制台报错，但onerror不触发 - 服务器返回 200 状态码的兜底图（如某些 CDN 的 404 返回占位图）—— 浏览器认为“加载成功”，哪怕内容是“图片不存在”
- 图片文件头正常但数据损坏（如 JPEG 数据块坏）——
naturalWidth === 0可检测，但需额外 JS 判断
真正难处理的是 fallback 后要不要再 fallback
比如默认图也挂了，是否要 fallback 到 base64、是否要记录失败次数、是否要上报监控。这些边界情况往往被忽略，但线上一出问题就是静默白屏。
最易被跳过的一步是：没验证备用图本身是否可访问。别只写 onerror，先在新标签页打开那个 fallback.jpg 地址，确认它真能返回 200 —— 否则所有容错逻辑只是自我安慰。
