8

I have a "logo" component which essentially writes out a picture element. The template look 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 produces 

<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 this works great but in Firefox only the mobile image loads. The tag loads fine outside of Angular. When I use a web inspector and remove the angular attributes everything works fine so I'm thinking its a browser bug but I thought I'd post here to see if others had the issue or if someone has a workaround.

dan
  • 289
  • 3
  • 13

1 Answers1

0

For me this does not work properly on Firefox. In the inspector I can see the DOM is correct but the images won't load properly. Only the last source is being rendered no matter the screen size. Chrome and Safari do work without any issues.

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>
Gunnaway
  • 13
  • 4