Image element does not work in angular2 and firefox

Question

I have a logo component that essentially writes out an image element. The template looks like this:

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

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

This works fine in Chrome, but only a mobile image is uploaded in Firefox. The tag loads fine outside of Angular. When I use the web inspector and remove the angular attributes, everything works fine, so I think this is a browser error, but I thought I would post it here to find out if others have problems or if someone has a workaround.

Answer 1

For me, this does not work properly in Firefox. In the inspector, I see that the DOM is correct, but the images will not load properly. Only the last source is displayed regardless of screen size. Chrome and Safari work without any problems.

I have the following HTML inside an Angular 2+ component.

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