html - 使用 webp 角度的后备图像

Question

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

这种在角度中使用后备图像的方法是否适用于所有浏览器。它似乎适用于浏览器，但不确定如何检查不支持 webp 的浏览器。我知道他们是另一种类似这样的方法

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

但这似乎无法正常工作，因为我将此片段从打字稿文件附加到 html 并始终呈现我在 img 标记中提供的 src。

那么任何人都可以判断第一种方法是否正确以及如何检查回退是否在不支持 webp 的浏览器中正常工作的任何指针

标签： htmlangulartypescriptwebpimage-fallback