圖片元素響應圖像不適用於 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>是沒有用的，視口將為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>