使用 ngx-translate 顯示圖片

Question

我想在我的 Angular 應用程序中使用 ngx-translate 來顯示特定於語言的圖像。 在我的情況下，它的徽標以不同的語言顯示，styles 取決於使用的語言。

我已經嘗試過

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

其中branding.logo是指web中特定標識的URL。

但 Chrome 顯示，它無法在以下位置找到請求的資源：“https://localhost:8100/branding.logo”。

我究竟做錯了什么？

Answer 1

[attr.src]="'branding.logo' | translate"導致使用文字branding.logo 。 如果您想從中獲得價值，那么它應該是[attr.src]="branding.logo"但是不支持翻譯。

為了實現翻譯，您可能希望將 map 作為branding.logoMapByLocale然后使用當前語言環境來獲取實際值。

您的代碼將如下所示：

（如何從這個問題中獲取語言環境）

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",
}