'How to use picture element in angular Material cards

How can I combine the picture element with the Angular Material card?

In Angular Material cards https://material.angular.io/components/card/examples you can use <img mat-card-image src="../assets/img/shiba2.jpg" alt="Photo">

(The mat-card-image directive makes the image take full width of the card.)

But when I introduce the picture element with the mat-card-image directive on the picture and/or source elements it breaks the CSS and it seems the element is not supported in Angular-Material.

This works but always shows the img element:

<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>

I want to use the picture element in order to use webp images and fall back to jpg/png in unsupported browsers like Safari.

htmlangularangular-material


Solution 1:[1]

using the example stackblitz given on material's website, you can do the following to get what you're looking for...

  <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>

relevant HTML for the example stackblitz on material's website:

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Akber Iqbal

Related Questions