使用 ngx-translate 显示图片

Question

我想在我的 Angular 应用程序中使用 ngx-translate 来显示特定语言的图像。在我的例子中，它是一个徽标，根据使用的语言以不同的语言和样式显示。

我已经试过了

        <img style="width: 100px" [attr.src]="'branding.logo' | translate" alt="" class="src" />

branding.logo 指的是网络中特定徽标的 URL。

但 Chrome 显示，它无法在以下位置找到请求的资源：“https://localhost:8100/branding.logo”。

我做错了什么？

Answer 1

[attr.src]="'branding.logo' | translate" 导致使用文字 branding.logo。如果你想从中获取值，那么它应该是[attr.src]="branding.logo"，但它不支持翻译。

为了实现翻译，您可能希望将其映射为branding.logoMapByLocale，然后使用当前语言环境获取实际值。

您的代码将如下所示：

（如何从this question获取语言环境）

import { LOCALE_ID, Inject } from '@angular/core';

...

constructor(
  @Inject(LOCALE_ID) public locale: string
) {

  this.logoMapByLocale = {
    'en': "https://some/path/en.png",
    'fr': "https://some/path/fr.png",
}