Frage Bildelement funktioniert nicht in eckig2 und Firefox


Ich habe eine "Logo" -Komponente, die im Wesentlichen ein Bildelement ausgibt. Die Vorlage sieht folgendermaßen aus:

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

<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 funktioniert das super aber in Firefox wird nur das mobile Image geladen. Das Tag wird außerhalb von Angular geladen. Wenn ich einen Web-Inspector verwende und die eckigen Attribute entferne, funktioniert alles gut, also denke ich, dass es ein Browser-Bug ist, aber ich dachte, ich würde hier posten, um zu sehen, ob andere das Problem hatten oder wenn jemand einen Workaround hat.


7
2017-07-12 15:21


Ursprung


Antworten:


Für mich funktioniert das bei Firefox nicht richtig. Im Inspektor kann ich sehen, dass das DOM korrekt ist, aber die Bilder werden nicht richtig geladen. Nur die letzte Quelle wird gerendert, unabhängig von der Bildschirmgröße. Chrome und Safari funktionieren ohne Probleme.

Ich habe das folgende HTML in einer Angular 2+ Komponente.

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

0
2017-08-21 08:33