चित्र तत्व angular2 और फ़ायरफ़ॉक्स

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> 

पैदा करता है क्रोम में इस महान काम करता है लेकिन केवल फ़ायरफ़ॉक्स मोबाइल छवि भार में। टैग कोणीय के बाहर ठीक लोड करता है। जब मैं एक वेब इंस्पेक्टर का उपयोग करता हूं और कोणीय गुणों को हटा देता हूं तो सब कुछ ठीक काम करता है, इसलिए मैं इसे एक ब्राउज़र बग सोच रहा हूं लेकिन मैंने सोचा कि मैं यह देखने के लिए यहां पोस्ट करूंगा कि दूसरों को कोई समस्या है या किसी के पास कोई कामकाज है या नहीं।

Answer 1

मेरे लिए यह फ़ायरफ़ॉक्स पर ठीक से काम नहीं करता है। इंस्पेक्टर में मैं देख सकता हूं कि डोम सही है लेकिन छवियां ठीक से लोड नहीं होंगी। केवल अंतिम स्रोत प्रस्तुत किया जा रहा है चाहे स्क्रीन आकार चाहे। क्रोम और सफारी बिना किसी समस्या के काम करते हैं।

मेरे पास एक कोणीय 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>