Bildelement funktioniert nicht in angular2 und firefox

Question

Ich habe eine "Logo" -Komponente, die im Wesentlichen ein Bildelement ausgibt. Die Vorlage sieht wie folgt aus:

<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 dies erzeugt

<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 funktioniert dies sehr gut, aber in Firefox nur den mobilen Bild Lasten. Das Tag wird außerhalb von Angular geladen. Wenn ich einen Web-Inspector verwende und die eckigen Attribute entferne, funktioniert alles gut, also denke ich, dass es ein Browser-Bug ist, aber ich dachte, ich würde hier posten, um zu sehen, ob andere das Problem hatten oder wenn jemand einen Workaround hat.

Answer 1

Für mich funktioniert das nicht richtig in Firefox. Im Inspektor kann ich sehen, dass das DOM korrekt ist, aber die Bilder werden nicht richtig geladen. Nur die letzte Quelle wird gerendert, unabhängig von der Bildschirmgröße. Chrome und Safari funktionieren ohne Probleme.

Ich habe das folgende HTML in einer Angular 2+ Komponente.

<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>