如何在角度材质卡中使用图片元素

Question

如何将图片元素与 Angular Material 卡片结合起来？

在 Angular Material 卡片 https://material.angular.io/components/card/examples 中，您可以使用 <img mat-card-image src="../assets/img/shiba2.jpg" alt="Photo">

（mat-card-image 指令使图像占据卡片的整个宽度。）

但是当我在图片和/或源元素上引入带有mat-card-image 指令的picture 元素时，它会破坏CSS，并且Angular-Material 似乎不支持该元素。

这可行，但总是显示img 元素：

<picture>
    <source srcset="../assets/img/shiba2.webp" type="image/webp">
    <source srcset="../assets/img/shiba2.jpg" type="image/jpg">
    <img mat-card-image src="../assets/img/shiba2.jpg" alt="Photo">
</picture>

我想使用图片元素，以便在 Safari 等不受支持的浏览器中使用 webp 图像并回退到 jpg/png。

Answer 1

使用example stackblitz given on material's website，您可以执行以下操作来获取您要查找的内容...

  <picture>
    <source media='(min-width:0px)' srcset="https://material.angular.io/assets/img/examples/shiba2.jpg">
    <img mat-card-image src="" alt="Photo of a Shiba Inu">
  </picture>

材料网站上示例 stackblitz 的相关 HTML：

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu (using <code>picture</code> tag)</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>
  <picture>
    <source media='(min-width:0px)' srcset="https://material.angular.io/assets/img/examples/shiba2.jpg">
    <img mat-card-image src="" alt="Photo of a Shiba Inu">
  </picture>
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>