图片元素响应图像不适用于 angular 4

Question

图片元素为

 <picture>
     <source  media="(max-width: 768px)" srcset="../assets/image1.png">
     <source  media="(min-width: 769px)" srcset="../assets/image2.png">
     <source  src="../assets/image3.png">
 </picture>

不适用于 Angular 4 它为所有视口宽度选择第一个源，在上面的例子中是 image1.png

有什么解决办法吗？

Answer 1

Angular与此无关。浏览器单独解释 <picture> 代码。

无论如何，您的代码的主要问题是它缺少必需的 <img> 元素。

还有，第三个<source>没用，viewport要么是max-width: 768px要么是min-width: 769px，不能是其他值。

Answer 2

<picture>
  <source media="(max-width: 1048px)" [srcset]="bannerMobOne" />
  <img [src]="bannerOne" alt="" />
</picture>

(或)

<picture>
  <source media="(max-width: 1048px)" srcset="assets/images/landing/Banner01.jpg" />
  <img src="assets/images/landing/Banner01.jpg" alt="" />
</picture>

图片元素响应图像不适用于 angular 4

picture element responsive images not working with angular 4

javascript

angular

picturefill

picture-element