angle2 및 firefox에서 그림 요소가 작동하지 않습니다.

Question

필자는 기본적으로 그림 요소를 쓰는 "로고"구성 요소를 사용합니다. 이 같은 템플릿보기는 : angular2에서

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

이이 잘 작동하지만, 파이어 폭스에만 모바일 이미지로드에 크롬에서

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

을 생산하고 있습니다. 태그는 Angular 바깥쪽으로 잘로드됩니다. 웹 속성을 사용하고 각도 속성을 제거하면 모든 것이 잘 작동하므로 브라우저 버그가 있다고 생각하지만 다른 사용자에게 문제가 있는지 또는 다른 해결 방법이 있는지 보려면 여기에 게시 할 수 있다고 생각했습니다.

Answer 1

제게 이것은 Firefox에서 제대로 작동하지 않습니다. 관리자는 DOM이 올바르지 만 이미지가 제대로로드되지 않는다는 것을 알 수 있습니다. 마지막 소스 만 화면 크기에 관계없이 렌더링됩니다. Chrome 및 Safari가 아무 문제없이 작동합니다.

저는 Angular 2+ 구성 요소 안에 다음 HTML을 가지고 있습니다.

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