我有一个“徽标”组件,它基本上写出了一个图片元素.模板看起来像这样:
<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之外加载很好.当我使用Web检查器并删除角度属性时,一切正常,所以我认为它是一个浏览器错误,但我想我会在这里发布,看看其他人是否有问题,或者有人有解决方法.
对我来说,这在Firefox上无法正常运行.在检查器中,我可以看到DOM是正确的,但图像将无法正确加载.无论屏幕大小如何,仅渲染最后一个源.
Chrome和Safari可以毫无问题地运行.
原文链接:https://www.f2er.com/angularjs/141164.htmlChrome和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>