html - 如何在 Angular Material 卡中使用图片元素

Question

如何将 picture 元素与 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 指令使图像占据卡片的整个宽度。)

但是当我介绍 picture元素与 mat-card-image图片和/或源元素上的指令会破坏 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>

我想使用 picture 元素以便使用 webp 图像并在 Safari 等不受支持的浏览器中回退到 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>

material 网站上示例 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>