alt 属性是 标签的必需属性，缺失会导致 HTML5 验证失败和构建工具报错；它解决语义传达问题，而 onerror 仅处理加载异常，二者不可替代。
alt 属性不是“可有可无的补充”，它是 eslint-plugin-jsx-a11y）默认报错。
为什么必须写 alt，而不是只靠 onerror fallback？
两者解决的问题完全不同：alt 是语义层，onerror 是加载层。即使图片 200 加载成功，没有 alt，屏幕阅读器仍无法传达内容；而 onerror 在 CORS 错误、MIME 类型不匹配、跨域策略拦截等场景下根本不会触发，页面只会静默显示断裂图标。
-
alt=""明确声明“该图无文字等价内容”，读屏软件静音跳过；省略alt属性则可能被读出src文件名或路径，造成干扰 - 搜索引擎（尤其是 Google 图片）依赖
alt理解图像主题，无alt的图片基本不参与图文混合搜索排名 -
onerror="this.src='fallback.png'"有循环风险：若fallback.png也 404，会无限触发错误，浏览器可能卡死或崩溃
alt 文本怎么写才合格？
核心不是“描述画面”，而是“说明这张图在当前上下文中起什么作用”。一句话说清，不加冗余修饰，不用“图片显示”“一张”这类无效前缀。
- 信息图：用
alt="2025年用户留存率对比：iOS 72.3%，Android 64.1%"，而非alt="柱状图" - 链接中的图：
@#@#@#@#@#@#@#@#@#@0，alt 描述链接目标，不是头像本人 - 装饰性图片（如分隔线、纯色背景块）：必须写
alt=""，不可省略，不可填alt="spacer"或空格 - 含文字的截图：完整写出图中关键文字，如
alt="错误提示：'Connection timeout (ERR_CONNECTION_TIMED_OUT)'"
图片加载失败时的安全 fallback 方案
别依赖单层 onerror，更不要用 jQuery 的已废弃 .error()。真实项目里推荐组合策略：
- 备用图统一放在 CDN 或根路径（如
/img/placeholder.svg），避免相对路径二次解析失败 - 用
data-属性标记是否已替换，防止循环：onerror="if(!this.dataset.replaced){this.dataset.replaced='1';this.src='/img/placeholder.svg';}" - 对关键占位图，直接内联 base64 SVG：
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiNmZmYiLz48dGV4dCB4PSI1MCIgeT0iNTAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9tYWluPSJ3cml0ZS10ZXh0Ij5ubyBpbWFnZTwvdGV4dD48L3N2Zz4="，彻底绕过网络请求 - CSS
background-image失效无事件可监听，只能靠 Network 面板查 404/403，注意路径基准是 CSS 文件位置，不是 HTML
最常被忽略的一点：开发时用 Windows 本地测试路径不区分大小写，上线 Linux 服务器后 Logo.jpg 和 logo.jpg 就是两个文件——alt 再准也没用，图根本加载不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
