Elemento immagine non funziona in angular2 e firefox

Question

Ho un componente "logo" che scrive essenzialmente un elemento immagine. L'aspetto modello come questo:

<picture class="logo"> 
<source srcset="{{srcsetMobile}}" media="(max-width: 767px)"> 
<source srcset="{{srcsetDesktop}}" media="(min-width: 768px)"> 
<img class="logo" title="{{title}}" alt="{{alt}}" src="{{fallbackSrc}}" 
</picture> 

In angular2 questo produce

<picture _ngcontent-lox-3="" class="logo"> 
<source _ngcontent-lox-3="" media="(max-width: 767px)" ng-reflect-srcset="/assets/img/Logo-mobile.png" srcset="/assets/img/Logo-mobile.png"></source> 
<source _ngcontent-lox-3="" media="(min-width: 768px)" ng-reflect-srcset="/assets/img/Logo.png" srcset="/assets/img/Logo.png"></source> 
<img _ngcontent-lox-3="" class="logo" ng-reflect-title="title" title="title" ng-reflect-alt="alt text" alt="alt text" ng-reflect-src="/assets/img/Logo-mobile.png" src="/assets/img/Logo-mobile.png"> 
</picture> 

In Chrome questa grande opera, ma in Firefox solo i carichi di immagini mobili. Il tag si carica bene al di fuori di Angular. Quando uso un ispettore web e rimuovo gli attributi angolari, tutto funziona correttamente, quindi penso che sia un bug del browser, ma ho pensato di postare qui per vedere se altri hanno avuto il problema o se qualcuno ha una soluzione alternativa.

Answer 1

Per me questo non funziona correttamente su Firefox. Nell'ispettore posso vedere che il DOM è corretto ma le immagini non si caricheranno correttamente. Solo l'ultima fonte viene resa, indipendentemente dalle dimensioni dello schermo. Chrome e Safari funzionano senza problemi.

Ho il seguente codice HTML all'interno di un componente Angular 2+.

<picture class="view-header__logo-picture"> 
    <source 
     media="(max-width: 1040px)" 
     srcset="images/logo-32x32.png, images/logo-64x64.png 2x" 
    /> 
    <source 
     media="(min-width: 1041px)" 
     srcset="images/logo-72h.png, images/logo-144h.png 2x" 
    /> 
    <img class="view-header__logo-image" 
     src="images/logo-72h.png" 
     alt="{{ 'general.company-title' | translate }}" 
    /> 
</picture>