resim öğesi angular2 ve firefox'ta çalışmaz

Question

Temelde bir resim öğesi yazan bir "logo" bileşenim var. Böyle şablon görünüm: angular2 olarak

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

bu harika çalışıyor ama Yalnızca Firefox mobil resim yükleri Chrome'da

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

üretir. Etiket, Angular'ın dışına doğru yükler. Bir web müfettişini kullandığımda ve açısal öznitelikleri kaldırdığımda her şey iyi çalışıyor, ben de onun bir tarayıcı hatası olduğunu düşünüyorum, ancak başkalarının sorunu çözüp görmediğini veya bir çözümün olup olmadığını görmek için burada yayınlayacağımı düşündüm.

Answer 1

Bu, Firefox'ta düzgün çalışmıyor. Müfettişte DOM'ın doğru olduğunu görebiliyorum ama görüntüler düzgün yüklenmiyor. Ekran boyutu ne olursa olsun sadece son kaynak oluşturuluyor. Chrome ve Safari, sorunsuz bir şekilde çalışıyor.

Aşağıdaki HTML'yi Angular 2+ bileşeninin içinde var.

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