图片元素在 angular2 和 firefox 中不起作用答案

【问题标题】：picture element does not work in angular2 and firefox图片元素在 angular2 和 firefox 中不起作用
【发布时间】：2017-08-21 16:33:30
【问题描述】：

我有一个“logo”组件，它基本上写出一个图片元素。模板如下所示：

<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 之外正常加载。当我使用网络检查器并删除角度属性时，一切正常，所以我认为这是一个浏览器错误，但我想我会在这里发布以查看其他人是否有问题或是否有人有解决方法。

【问题讨论】：

你解决了这个问题吗？
是的，我也一样。
如果你改变“src”而不是“srcset”它对我有用，但我不知道这是否适用于旧浏览器。

标签： firefox angular picturefill

【解决方案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>

【讨论】：