Me gustaría usar ngx-translate dentro de mi aplicación Angular para mostrar una imagen específica del idioma. En mi caso es un Logo que se muestra en diferentes idiomas y estilos dependiendo del idioma utilizado.
ya probé con
<img style="width: 100px" [attr.src]="'branding.logo' | translate" alt="" class="src" /> Donde branding.logo hace referencia a una URL del logotipo en particular en la web.
Pero Chrome muestra que no pudo encontrar el recurso solicitado en: 'https://localhost:8100/branding.logo'.
¿Qué estoy haciendo mal?
[attr.src]="'branding.logo' | translate" hace que se use el literal branding.logo . Si desea obtener el valor de eso, entonces debería ser [attr.src]="branding.logo" , sin embargo, eso no admitirá la traducción.
Para lograr una traducción, probablemente desee mapearla como branding.logoMapByLocale y luego usar la configuración regional actual para obtener el valor real.
Su código se verá algo como esto:
(Cómo obtener la configuración regional de esta pregunta )
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", }