只有最内层<img>的alt生效，因为<picture>不支持alt，<source>无alt属性且被浏览器忽略；当任一<source>匹配成功后加载失败（如404），浏览器不会降级到<img>，故alt不显示。
<picture> 里的 <img> 是 fallback，它的 alt 属性一定会生效——但前提是前面所有 <source> 都没匹配上，或者匹配了但资源加载失败。
为什么只有最内层 <img> 的 alt 起作用
<picture> 本身不支持 alt，浏览器只认内部那个 <img> 标签的 alt。所有 <source> 都是“条件候选”，它们没有 alt 属性（加了也忽略）。
-
<source media="(min-width: 768px)" srcset="hero-tablet.jpg">→ 不需要、也不能写alt -
<source type="image/avif" srcset="photo.avif">→ 同样不处理alt - 只有最后那个
<img src="fallback.jpg" alt="描述文字">的alt才会被读取和渲染
当 <source> 匹配成功但图片 404 时，alt 还会显示吗
不会。只要某个 <source> 被选中并发起请求，哪怕返回 404 或 CORS 错误，浏览器仍认为“已选用该 source”，此时不会退回到 <img>，也就不会触发它的 alt。
- 现象：页面留白 / 显示破损图标，但无
alt文字 - 验证方式：打开 DevTools → Network → 看被选中的
srcset请求是否返回非 2xx - 解决办法：确保
<source>指向的资源真实可访问，或用onerror手动 fallback（需 JS 辅助）
<img> 放在 <picture> 外 vs 内，alt 行为有区别吗
有本质区别：
立即学习“前端免费学习笔记（深入）”；
- 放在
<picture>内部：它是 fallback，alt仅在所有<source>失效时生效 - 单独放在
<picture>外：它就是普通图片，alt在任何加载失败场景都立即生效 - 常见错误：把
<img>写成<picture><img></picture>但漏掉<source>—— 此时<picture>退化为容器，alt正常工作，但失去了响应式/格式切换能力
真正容易被忽略的点是：你没法靠 <source> 的 alt 做可访问性兜底，所有语义描述必须塞进那个最终的 <img> 里；而且一旦 <source> 被选中，后续加载失败就彻底“静默”，连 alt 都不给你机会展示。
