Элемент изображения не работает в angular2 и firefox

Question

У меня есть компонент "логотип", который по существу записывает элемент изображения. Шаблон выглядит так:

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

В angular2 это производит

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

В Chrome это прекрасно работает, но в Firefox загружается только мобильное изображение. Тег отлично загружается за пределами Angular. Когда я использую веб-инспектор и удаляю угловые атрибуты, все работает нормально, поэтому я думаю, что это ошибка браузера, но я решил опубликовать здесь, чтобы узнать, есть ли проблема у других или есть ли обходной путь.

Answer 1

Для меня это не работает должным образом на Firefox. В инспекторе я вижу, что DOM правильный, но изображения не загружаются должным образом. Отображается только последний источник независимо от размера экрана. Chrome и Safari работают без проблем.

У меня есть следующий HTML внутри компонента 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>