图片国际化需动态切换src值，通过data-i18n-src显式标记并配合语言包路径模板实现，动态插入或js创建的图片须手动触发翻译，需额外标记data-i18n-srcset。
图片 src 属性本身不支持多语言切换
HTML 的 <img src="..."> 是纯路径引用，浏览器不会根据 lang 或语言包自动替换。所谓“图片国际化”，本质是**按语言动态切换 src 值**，不是靠属性声明或 CSS 控制。常见错误是只改 document.documentElement.lang，结果 <img src="logo-en.png"> 在中文页里照旧显示英文 logo。
data-i18n-src 是最直接的标记方式
给 <img> 加 data-i18n-src 属性，告诉翻译函数：“这个 src 要按语言换”。它和 data-i18n-alt 一样，属于显式后缀约定，不加就不会处理。
-
<img data-i18n-src="logo" alt="Company logo">→ 语言包里查"logo": "./images/logo-zh.png" - 必须同时配
data-i18n-alt，否则屏幕阅读器仍读英文alt - 不要用
data-i18n（无后缀）——它只更新textContent，对src完全无效 -
loading、width等其他属性不参与翻译，保持原样即可
多源路径工程化：用语言码拼接比维护多套键更可靠
比起在每个语言包里硬写 "logo": "./zh/images/logo.png"，更推荐路径模板 + 语言变量组合。这样避免键名漏翻、路径不一致、新增语言要改所有 JSON 文件。
- 语言包只存基础路径片段：
"logo_base": "images/logo" - JS 拼接时用当前语言码（如
zh-Hans）生成完整路径：${base}/${lang}/logo.png或${base}_${lang}.png - 优先用子目录结构（
./locales/zh-Hans/images/），比文件名后缀（logo_zh-Hans.png）更易排查 404 - CDN 场景下，可把语言码注入 URL query：
https://cdn.example.com/logo.png?lang=zh-Hans，由服务端或边缘规则返回对应资源
动态插入的图片必须手动触发翻译
AJAX 加载的卡片、懒加载模块、弹窗里的 <img>，插入 DOM 后不会自动识别 data-i18n-src。必须在 insertAdjacentHTML 或 appendChild 后立即调用翻译函数遍历新节点。
- 别依赖
MutationObserver监听整个 document —— 它无法区分哪些是语言相关变更，且性能差 - 推荐封装一个
translateNode(node)，只处理传入节点及其后代中带data-i18n-*的元素 - 如果图片是通过 JS 创建（
new Image()），那就根本没机会打data-i18n-src，得在创建时直接赋值正确路径 - 注意：
<picture></picture>和<source></source>里的srcset同样需要data-i18n-srcset显式标记，否则响应式图片也会失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
