0
<img src=${imageUrlWebp} onerror="this.error=null;this.src=${imageUrl}" width="700" height="110"/>

Does this method of using fallback images in angular work in all the browsers.It seems to work in browser but not sure how to check in browsers which don't support webp. I know that they is another method something like this

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

But this doesn't seem to work properly as I am appending this snippet to html from a typescript file and always renders the src i give in img tag.

So can anyone tell if the first method is correct and any pointers on how to check if fallback is working properly in browsers which don't support webp

coding life
  • 42
  • 1
  • 9
  • The only browser you might have issues with is `Safari` with webp. Otherwise Angular itself isn't supported on older browsers anyway. https://angular.io/guide/browser-support and https://caniuse.com/?search=webp – Get Off My Lawn May 21 '21 at 15:14
  • I know I would have problems with safari on systems running anything lower than macOS Big Sur and IE.....but I want to be sure that my fallback image runs on it – coding life May 21 '21 at 15:29
  • @GetOffMyLawn would onerror event be triggered when webp image is not supported by that particular browser – coding life May 22 '21 at 21:54
  • I am not sure.. – Get Off My Lawn May 23 '21 at 15:54

0 Answers0