I would like to use ngx-translate inside my Angular app to display a language-specific image. In my case its a Logo which is displayed in different languages and styles depending on the used language.
I did already tried with
<img style="width: 100px" [attr.src]="'branding.logo' | translate" alt="" class="src" />
Where branding.logo refers to a URL of the particular logo in the web.
But Chrome displays, that it couldn't find the requested ressource at: 'https://localhost:8100/branding.logo'.
What am I doing wrong?
[attr.src]="'branding.logo' | translate" is causing the literal branding.logo to be used. If you want to get the value from that then it should be [attr.src]="branding.logo" however that will not support translate.
In order to achieve a translation, you probably want to map it as branding.logoMapByLocale and then use the current locale to get the actual value.
Your code will look something like this:
(How to get locale from 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",
}