离子角度离子img和回退图像问题

Question

我正在使用Ionic Angular框架构建一个移动应用程序，希望支持webp图像作为主图像，如果不支持，我希望显示回退图像。

它与img一起工作

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

但它不适用于ion-img。它总是在此处显示回退png图像。

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

Answer 1

首先，让我们看看关于<picture>标签的文档：

HTML元素包含零个或多个元素，并且一个元素为不同的显示器/设备场景。

<picture>应仅包含<source>和<img>标记，而不包含<ion-img>。此外，<ion-img>比<img>更复杂的元素：https://ionicframework.com/docs/api/img

因此，您应该在项目中使用以下代码：

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