Ionic Angular ion-img and fallback image issue

Issue

I am building a mobile app using Ionic Angular framework and want to support webp images as primary images and if it is not supported I want the fallback image to be displayed.

It works with img

<picture>
  <source srcset="assets/images/hello.webp" type="image/webp" />
  <img src="assets/images/hello.png" alt="Hello image" />
</picture>

But it does not work with ion-img. It always shows the fallback png image here.

<picture>
  <source srcset="assets/images/hello.webp" type="image/webp" />
  <ion-img src="assets/images/hello.png" alt="Hello image"></ion-img>
</picture>

Solution

First of all, let's see documentation about <picture> tag:

The HTML element contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios.

<picture> should contain only <source> and <img> tags but not <ion-img>. Additionally, <ion-img> more complicated element then <img>: https://ionicframework.com/docs/api/img

So, you should use this code in your project:

<picture>
  <source srcset="assets/images/hello.webp" type="image/webp" />
  <img src="assets/images/hello.png" alt="Hello image" />
</picture>

Answered By - Danil Prokhorenko