图片元素响应图像不适用于角度 4答案

【问题标题】：picture element responsive images not working with angular 4图片元素响应图像不适用于角度 4
【发布时间】：2022-05-09 16:45:35
【问题描述】：

图片元素为

 <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

有什么解决办法吗？

【问题讨论】：

标签： javascript angular picturefill picture-element

【解决方案1】：

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

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

另外，第三个<source> 没用，视口将是max-width: 768px 或min-width: 769px，不能是其他值。

【讨论】：

太好了，很高兴能提供帮助！

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

【讨论】：