图片加载失败时alt文案不显示，通常不是alt写错，而是图片未用标签、被css隐藏、或动态插入时src非法/为空导致浏览器未触发加载失败逻辑；alt必须存在于合法中且非空（装饰图用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> + <code>background-image 模拟图片？不行——CSS 背景图不支持 alt，必须改回 <img> 或加 role="img" aria-label="..."

  React/Vue 里动态图片挂了，alt 为啥还是不显示？

  框架层容易忽略两点：一是异步加载中 src 为空或非法 URL，导致浏览器根本不会触发“加载失败”逻辑；二是组件重渲染时覆盖了原始 alt 值。实操建议：

  • 确保初始 src 不是空字符串或 undefined，否则浏览器不认为这是“一张图”，直接忽略 alt
  • 用 onError 回调兜底：<img src="%7Burl%7D" alt="加载失败" onerror="{(e)"> e.target.src = '/placeholder.png'} />
  • Vue 中避免在 v-bind:src 绑定前未校验 URL，React 中别在 useEffect 里延迟设置 src 后再补 alt

  Chrome DevTools 里能看到 alt，但读屏器读不出来？

  常见于以下场景：

  • 图片被包裹在 <a></a> 或 <button></button> 里，且父元素有 aria-label 或 title，读屏器可能优先读父级描述，忽略 alt
  • alt 值含控制字符、超长（建议 ≤125 字符）、或纯标点（如 alt="。"），部分读屏器会静音跳过
  • 页面用了 aria-hidden="true" 在父容器上，连带屏蔽了子元素的 alt
  • 测试时没关掉图片加载（比如开了 Chrome 的“禁用图片”选项），得手动断网或删 src 才能触发失败路径
  实际中最容易被忽略的，是把 alt 当作“可有可无的备注”，而不是图片语义的强制声明——只要用了 <img>，就必须有 alt，哪怕为空。没有例外。