图片加载失败时alt文案不显示，通常不是alt写错，而是图片未用<img>标签、被CSS隐藏、或动态插入时src非法/为空导致浏览器未触发加载失败逻辑；alt必须存在于合法<img>中且非空（装饰图用alt=""），否则无法生效。
图片加载失败时文案不显示，alt 属性没起作用？
多数情况不是 alt 写错了，而是浏览器只在图片加载失败（或禁用图片）时才渲染它——而现代前端常把图片当背景图、用 CSS 覆盖、或用 JS 动态插入但未设 alt。如果看到空白框却没文字，先确认：这张图是不是用 <img> 标签写的？alt 是不是写在了正确位置？有没有被 CSS 的 visibility: hidden 或 display: none 连带隐藏？
alt 和 aria-label 到底该用哪个？
alt 是 <img> 的原生属性，专为图片内容描述设计，浏览器和读屏器都优先识别它；aria-label 是通用 ARIA 属性，适合按钮、图标等无语义元素。混用反而可能干扰辅助技术：
- 纯装饰图：用
alt=""（空字符串），明确告诉读屏器“跳过” - 有信息量的图（如流程图、数据图）：用简明
alt="折线图显示2023年用户增长趋势" - 用
<div>+background-image模拟图片？不行——CSS 背景图不支持alt，必须改回<img>或加role="img" aria-label="..."
React/Vue 里动态图片挂了，alt 为啥还是不显示？
框架层容易忽略两点：一是异步加载中 src 为空或非法 URL，导致浏览器根本不会触发“加载失败”逻辑；二是组件重渲染时覆盖了原始 alt 值。实操建议：
- 确保初始
src不是空字符串或undefined，否则浏览器不认为这是“一张图”，直接忽略alt - 用
onError回调兜底：<img src={url} alt="加载失败" onError={(e) => e.target.src = '/placeholder.png'} /> - Vue 中避免在
v-bind:src绑定前未校验 URL，React 中别在useEffect里延迟设置src后再补alt
Chrome DevTools 里能看到 alt，但读屏器读不出来？
常见于以下场景：
- 图片被包裹在
<a>或<button>里，且父元素有aria-label或title，读屏器可能优先读父级描述，忽略alt -
alt值含控制字符、超长（建议 ≤125 字符）、或纯标点（如alt="。"），部分读屏器会静音跳过 - 页面用了
aria-hidden="true"在父容器上，连带屏蔽了子元素的alt - 测试时没关掉图片加载（比如开了 Chrome 的“禁用图片”选项），得手动断网或删
src才能触发失败路径
alt 当作“可有可无的备注”，而不是图片语义的强制声明——只要用了 <img>，就必须有 alt，哪怕为空。没有例外。 
