onerror必须配合this.onerror=null才能可靠降级，否则fallback图404会导致静默失败；唯一安全写法是onerror="this.src='/images/placeholder.svg'; this.onerror=null;"，且推荐用base64内联占位图防路径失效。
只加 onerror 但不切断事件链，或 fallback 图路径不可靠，90% 的“降级失败”其实根本没触发——图片直接白屏或裂图闪一下就卡死。
onerror 必须配 this.onerror=null 才生效
浏览器规范明确：onerror 只触发一次；但如果 fallback 图也 404，它不会再次触发，而是静默失败。你以为“换图逻辑跑过了”，其实只是第一次赋值后事件被自动卸载，后续再错也不管了。
-
onerror="this.src='/images/placeholder.svg'; this.onerror=null;"是唯一可靠内联写法，分号不能省，顺序不能调 - 避免写成
onerror="fallback()"—— 函数未定义时整个事件处理器解析失败，onerror彻底不执行 - 动态创建的
<img>，必须在appendChild()前绑定onerror，否则首次加载错误捕获不到
fallback 图不能依赖相对路径或 CDN 可用性
本地双击打开 HTML、弱网、CDN 故障、路径拼写错误——这些场景下，你写的 default.png 很可能比原图还先 404。一旦 fallback 失败，用户看到的就是纯白或灰块，且无任何提示。
- 推荐用
data:image/svg+xml;base64,...内联 SVG 占位图，零请求、零路径风险、体积小（通常 - 绝对路径更稳：
/assets/placeholder.svg比../images/placeholder.png少一层解析歧义 - 服务端部署时，确保
/assets/路径真实存在并可匿名访问（Nginx 需配置location /assets/ { alias /path/to/assets/; }）
alt 不是降级方案，而是语义底线
alt 属性从不参与“图片是否显示”的逻辑判断。它只在图片无法加载 + 浏览器决定展示替代文案时才出现（如屏幕阅读器、禁用图片模式、或某些浏览器设置）。纯靠 alt 当降级，等于放弃视觉兜底。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
alt=""在加载失败时可能完全不显示文字，留白区域无任何信息 - 按钮类图片必须写功能型文案，如
alt="分享到微信"，不能写alt="分享图标" - 如果用了
onerror换图，alt应与 fallback 图语义一致，而非原图
现代浏览器可用 :has() 做 CSS 层降级
Chrome 105+、Safari 15.4+ 支持 img:has(:not([src])) 这类选择器，能绕过 JS 执行时机问题，在资源未加载完成前就提供背景占位。
- 写法示例：
img { background: #f5f5f5 url(data:image/svg+xml,%3Csvg...%3E) center/24px no-repeat; }<br>img[src]:not([src^="data:"]):not([src^="http"]):not([src^="/"]) { background-color: #e0e0e0; } - 它不解决真实 404，只对空
src、非法协议（如src="javascript:void(0)"）有效 - 真正需要响应 404 的场景（如用户头像、商品图），仍需
onerror或IntersectionObserver校验
最容易被忽略的是：onerror 不会捕获 CORS 错误（控制台报 Blocked by CORS policy 时仍会触发），但换源无效——因为跨域限制同样作用于 fallback 图。这种情况下，base64 内联或同源占位图才是唯一出路。
