img的onerror事件需写在标签内或用addeventlistener绑定，仅对真实请求失败触发；须加data-loaded标记防循环，且不响应srcset单源失败或mime错误。
HTML资源加载失败不能只靠“刷新重试”，必须在代码层主动拦截、判断、兜底——否则用户看到的就是空白图、断裂样式、静音视频或直接报错的白屏。
img 标签的 onerror 事件怎么写才不被忽略
浏览器对 onerror 的触发有严格条件：只有资源真实请求失败（HTTP 404/403、网络中断、CORS 拒绝等）才会触发，而 src 为空、路径语法错误、file:// 协议下跨文件读取失败等情况反而不会进 onerror。
- 必须把
onerror写在标签内，且函数需全局可访问（或用addEventListener绑定）：<img src="logo.png" onerror="this.src='fallback.png'"> - 避免重复执行：加个标记防止 fallback 图也失败后无限循环：
onerror="if (!this.dataset.loaded) { this.dataset.loaded = '1'; this.src = 'fallback.png'; }" - 不要依赖
onerror处理所有图片问题——它对srcset中单个候选源失败不响应，也不捕获 MIME 类型错误（如返回 HTML 内容却声明为 image/png）
script 和 link 标签如何监听加载失败
<script></script> 和 <link rel="stylesheet"> 原生支持 onerror，但行为和 img 不同：它们只在 HTTP 状态码非 2xx 或网络中断时触发，不响应 JS 语法错误或 CSS 解析失败。
- 脚本加载失败时，
onerror回调中无法访问this（因为不是元素实例），要用事件参数：<script src="app.js" onerror="handleScriptError(event)"></script>，然后在函数里用event.target.src获取地址 - CSS 加载失败不会阻塞页面渲染，但后续 JS 里读取
getComputedStyle可能拿到默认值——建议配合document.styleSheets检查cssRules长度是否为 0 来二次确认 - ES Module 场景下，
import()动态导入必须用try/catch，onerror完全无效：import('./module.js').catch(() => loadFallback())
html-loader 构建时报 “Must be non-empty” 怎么快速定位
这个错误不是运行时抛出的，而是 webpack 构建阶段由 html-loader 插件检测到空资源属性（如 src=""、href=" "）时主动中断的，说明 HTML 模板里存在非法引用。
- 搜索整个项目中所有
src=""、href=""、srcset=""的标签，尤其注意模板字符串拼接或服务端注入的区域 - 检查构建前是否被预处理器（如 EJS、Pug）意外清空了属性值；若用了
html-webpack-plugin，确认templateParameters传入的变量不为null或undefined - 临时加
<!-- webpackIgnore: true -->注释绕过校验仅用于调试，但上线前必须修复源头，否则可能漏掉真实 404
本地双击打开 HTML 时资源全 404 的根本原因
这不是路径写错了，而是 file:// 协议本身被现代浏览器限制：所有带斜杠开头的路径（如 src="/js/app.js"）会被解析成 file:///js/app.js，根本不在当前目录下。
- 绝对路径
/xxx在file://下永远指向磁盘根目录，不是网站根目录——必须全部改成相对路径（./js/app.js）或移除开头斜杠（js/app.js） -
<base href="./">能统一解决，但必须放在最前面，且会影响所有相对 URL（包括a标签跳转） - 真正可靠的方案是启动一个本地 HTTP 服务：Python 用户用
python -m http.server 8000，Node 用户用npx serve，让页面走http://localhost:8000协议
资源加载错误处理最易被忽略的一点：你写的 onerror 函数本身也可能出错（比如引用了未定义的变量），导致兜底逻辑失效。上线前务必在控制台手动删掉一个资源路径，验证 fallback 是否真能跑通，而不是只看 console 有没有报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
