图标的alt不显示，90%因src未触发加载：src为空、非法协议、data URL或父容器display: none时，浏览器跳过加载逻辑，alt被忽略；必须用真实可访问的src（如/i/px.gif）并确保存在且alt显式声明。
图标图片降级显示失效，90% 是因为 src 没触发加载，不是 alt 写得不对。
为什么图标 <img alt="HTML图标图片怎么做降级显示" > 的 alt 常常不显示
浏览器只在真正发起图片请求后，才把 alt 当作可渲染的降级文本。如果 src 是空字符串、"javascript:void(0)"、"data:image/gif;base64,..."（部分浏览器视为无加载意图），或父容器设了 display: none，alt 就不会出现。
-
src=""或src="undefined"→ 浏览器跳过加载逻辑 →alt被忽略 -
aria-hidden="true"或visibility: hidden→ 整个元素（含alt文本）对辅助技术不可见 - 用
<div style="background-image: url(...)"></div>替代<img alt="HTML图标图片怎么做降级显示" >→alt完全无效，因为不是<img alt="HTML图标图片怎么做降级显示" >元素
导航图标用 <img alt="HTML图标图片怎么做降级显示" > 时怎么确保降级生效
必须让 <img alt="HTML图标图片怎么做降级显示" > 的 src 是一个真实可返回 HTTP 200 的资源，哪怕只是 1×1 透明 GIF。
- ✅ 推荐做法：
<img src="/i/px.gif" alt="首页">（/i/px.gif是服务器上真实存在的小图） - ❌ 避免写法：
<img src="" alt="首页">、<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="首页"> - 必须显式声明
width和height（或用 CSS 固定尺寸），否则加载失败时布局会抖动 - 功能性图标（如“搜索”“关闭”）的
alt必须说明行为意图，例如alt="搜索站内内容"，而非alt="放大镜图标"
<picture></picture> 里图标怎么写才能让 alt 降级可用
<picture></picture> 本身不承载 alt，它只是容器；真正起作用的是其内部那个**必须存在的 <img alt="HTML图标图片怎么做降级显示" > 子元素**，且它的 src 必须可加载。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确结构：
<picture><source media="(min-width: 768px)" srcset="icon-home-lg.webp"><source srcset="icon-home-sm.webp"><img src="/i/px.gif" alt="首页"></source></source></picture> - ❌ 错误结构：
<picture><source ...><source ...></source></source></picture>（缺<img alt="HTML图标图片怎么做降级显示" >子元素） -
<source></source>的media或type不影响alt行为 ——alt只属于最终那个<img alt="HTML图标图片怎么做降级显示" >
最易被忽略的一点：CMS 富文本编辑器或 JS 动态插入图标时，alt 字段常为空或填了文件名，这等于没设；而 el.alt = "" 和没写 alt 属性效果不同——前者是合法空值（装饰性图标适用），后者是语义缺失。降级是否真能用，取决于 HTML 输出那一刻的 <img src="..." alt="..."> 是否完整、可加载、上下文准确。
