如何在Angular localize中配置使用本地化图片资源？

该需求不需要依赖Angular localize的特殊能力，直接通过angular.json的构建配置即可实现，完全符合你预期的打包输出结构，具体操作如下：

1. 整理本地资源（两种方案可选） #

方案A：按语言拆分资源目录（更推荐，易维护） #

在src目录下新建assets-i18n文件夹，内部按语言标识建子目录，对应语言的图片直接用无后缀的名称存储：

- /src
    - /assets-i18n
        - /en
            - my-image.png // 英文专属图
        - /de
            - my-image.png // 德文专属图
    - /assets // 所有语言通用的公共资源仍放在这里

方案B：保留现有带语言后缀的命名 #

如果不想调整现有文件结构，继续使用my-image_en.png、my-image_de.png的命名规则也可以，直接放在原src/assets目录下即可。

2. 修改angular.json配置 #

打开项目根目录的angular.json，找到projects -> 你的项目名 -> architect -> build -> configurations节点，为每个语言的构建配置单独添加assets规则：

{
  "configurations": {
    "en": {
      "localize": ["en"],
      // 覆盖顶层assets配置，先加载公共资源，再加载对应语言的专属资源
      "assets": [
        // 保留公共资源的打包规则
        {
          "glob": "**/*",
          "input": "src/assets/",
          "output": "/assets/"
        },
        // 方案A的配置：加载英文专属目录资源
        {
          "glob": "**/*",
          "input": "src/assets-i18n/en/",
          "output": "/assets/"
        }
        // 方案B的配置（如果用方案A可删掉这段）：匹配带后缀的英文图，重命名输出
        // {
        //   "glob": "my-image_en.png",
        //   "input": "src/assets/",
        //   "output": "/assets/my-image.png"
        // }
      ]
    },
    "de": {
      "localize": ["de"],
      "assets": [
        {
          "glob": "**/*",
          "input": "src/assets/",
          "output": "/assets/"
        },
        // 方案A：加载德文专属目录资源
        {
          "glob": "**/*",
          "input": "src/assets-i18n/de/",
          "output": "/assets/"
        }
        // 方案B的配置
        // {
        //   "glob": "my-image_de.png",
        //   "input": "src/assets/",
        //   "output": "/assets/my-image.png"
        // }
      ]
    }
  }
}

3. 代码中直接引用图片 #

配置完成后，代码里不需要写任何语言判断逻辑，直接用统一路径引用即可：

<img src="/assets/my-image.png" alt="示例图">

构建后对应语言包的assets目录下会自动放入对应语言的图片，访问对应语言站点时会自动加载正确的资源。

内容的提问来源于stack exchange，提问作者Bastiaan van den Berg