图标的alt不显示，90%因src未触发加载：src为空、非法协议、data URL或父容器display: none时，浏览器跳过加载逻辑，alt被忽略；必须用真实可访问的src（如/i/px.gif）并确保存在且alt显式声明。

图标图片降级显示失效，90% 是因为 src 没触发加载，不是 alt 写得不对。

为什么图标 的 alt 常常不显示

浏览器只在真正发起图片请求后，才把 alt 当作可渲染的降级文本。如果 src 是空字符串、"javascript:void(0)"、"data:image/gif;base64,..."（部分浏览器视为无加载意图），或父容器设了 display: none，alt 就不会出现。

• src="" 或 src="undefined" → 浏览器跳过加载逻辑 → alt 被忽略
• aria-hidden="true" 或 visibility: hidden → 整个元素（含 alt 文本）对辅助技术不可见
• 用
  替代 → alt 完全无效，因为不是 元素

导航图标用 时怎么确保降级生效

必须让 的 src 是一个真实可返回 HTTP 200 的资源，哪怕只是 1×1 透明 GIF。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• ✅ 推荐做法：（/i/px.gif 是服务器上真实存在的小图）
• ❌ 避免写法：、
• 必须显式声明 width 和 height（或用 CSS 固定尺寸），否则加载失败时布局会抖动
• 功能性图标（如“搜索”“关闭”）的 alt 必须说明行为意图，例如 alt="搜索站内内容"，而非 alt="放大镜图标"

里图标怎么写才能让 alt 降级可用

本身不承载 alt，它只是容器；真正起作用的是其内部那个**必须存在的 子元素**，且它的 src 必须可加载。

• ✅ 正确结构：
• ❌ 错误结构：（缺 子元素）
• 的 media 或 type 不影响 alt 行为 —— alt 只属于最终那个

最易被忽略的一点：CMS 富文本编辑器或 JS 动态插入图标时，alt 字段常为空或填了文件名，这等于没设；而 el.alt = "" 和没写 alt 属性效果不同——前者是合法空值（装饰性图标适用），后者是语义缺失。降级是否真能用，取决于 HTML 输出那一刻的 是否完整、可加载、上下文准确。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！