picture 标签不支持按语言切换图片，因 source 元素无 lang 属性，浏览器直接忽略；可行方案需服务端渲染、构建时多语言生成或客户端 js 回退，且须注意 alt 一致性、cdn 缓存及 vary 配置。
picture 标签本身不支持按语言（lang 或 Accept-Language）切换图片，浏览器根本不读取或匹配语言环境 —— 所有基于 <source lang="zh"></source> 或类似写法的尝试都会静默失效。
为什么 <source></source> 没有 lang 属性
HTML 规范中 <source></source> 只允许 media、srcset、sizes、type 和 height/width 等属性，lang 不在合法列表里。浏览器解析时直接忽略该属性，既不报错也不生效。
常见错误现象包括：
– 写了 <source lang="ja" srcset="banner-ja.jpg"></source>，但所有语言用户都加载同一张图
– 开发者误以为“和 CSS 的 :lang() 类似”，实际毫无关联
– Network 面板里始终只看到一个请求，且是第一个 <source></source> 或 <img> 的资源
真正可行的本地化图片方案
必须跳出 <picture></picture> 单标签思维，结合服务端或构建时逻辑：
- 服务端渲染（SSR）：根据请求头
Accept-Language注入对应srcset或src值，生成带语种特化路径的<picture></picture>—— 浏览器拿到的就是已“翻译好”的 HTML - 构建时处理（如 Webpack/Vite 插件）：按
zh-CN/zh-TW/en-US目录结构预生成多份 HTML，每份中<source></source>的srcset指向对应语言图，静态部署 - 客户端 JS 回退（仅限非首屏/低优先级图）：用
navigator.language读取当前语言，动态设置document.querySelector('img').src；但注意会触发二次加载、无 SEO、首屏空白
关键点：<picture></picture> 是声明式资源选择器，不是运行时国际化引擎 —— 它选的是“设备能用哪张”，不是“用户看哪版”。
容易被忽略的兼容性陷阱
即使你用服务端正确输出了不同语种的 <source></source>，仍需注意：
-
<img>的alt必须和服务端语言一致，否则屏幕阅读器读出中文 alt，图却是日文文案，语义断裂 - CDN 或代理缓存可能把
Accept-Language当作 vary 字段忽略，导致 A 用户看到 B 语言的 HTML 缓存 → 必须配置Vary: Accept-Language - 不要混用：比如在英文 HTML 里塞
media="(prefers-color-scheme: dark)"+ 日文图，深色模式切换时语言就错乱了
最稳妥的做法，是把语言维度彻底移出 HTML 渲染层，交由路由（如 /zh/home）、HTTP 头或构建产物分离来承载 —— <picture></picture> 只管尺寸、格式、DPR 这些浏览器原生可判的条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
