alt 是 img 标签的强制必需属性，用于可访问性和语义化，非仅图片失败时的备用文字；装饰性图用 alt=""，信息性图需简洁准确描述内容，功能性图应说明行为意图。
alt 属性不是“图片挂了才想起来加”的补救措施，而是 <img> 标签的强制必需属性——不写就违反 HTML 规范，可访问性工具会报错，屏幕阅读器直接跳过或报“无描述图像”。
alt 不显示？先确认是不是合法的 <img>
-
alt只在标准<img src="..." alt="...">中生效；用div+background-image、picture里没写img子元素、或用 SVG 内联写法，alt都不会出现 - 常见误操作：
-
src初始值为""、undefined或非法 URL（如src="javascript:void(0)"），浏览器压根不触发加载逻辑，也就不会渲染alt - 图片被父级
aria-hidden="true"、display: none或visibility: hidden隐藏，alt文字同步不可见 - React/Vue 中动态绑定
src时，未做空值校验，导致首次渲染时src为空，alt被忽略
-
alt 值怎么写才有效
- 装饰性图片（如分隔线、背景花边）：必须写
alt=""（空字符串），不能删掉属性，也不能写alt=" "（带空格）或alt="decorative" - 有信息量的图（如产品图、流程图、数据图表）：用简洁、准确的自然语言描述内容本质，例如：
alt="iPhone 15 Pro 金色正面图，显示灵动岛和钛金属边框"alt="2023年Q4用户留存率折线图，峰值出现在第7天" - 功能性图片（如按钮图标、链接头像）：
alt描述行为意图，不是外观，例如：<a href="/search"><img src="search.svg" alt="搜索"></a><button><img src="close.png" alt="关闭弹窗"></button> - 避免：
- 写 “图片”“图标”“此处为图片” 等冗余词
- 超过 125 字符（部分读屏器截断）
- 含控制字符、全标点（如
alt="。"）
alt 和 title 别混用
-
title是鼠标悬停提示，移动端基本无效，完全不替代alt - 两者同时存在互不影响语义权重，但
title="点击查看大图"绝不能代替alt="产品主视图" - 如果只想要失败时文字，只设
alt即可；title是额外补充，不是备选方案
最常被忽略的一点：不是“图片加载失败时才需要 alt”，而是只要用了 <img>，就必须有 alt ——无论它是否可能失败、是否可见、是否被 JS 控制。它不是 fallback，是语义锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
