Ionic Angular ion-img 和后备图像问题答案

【问题标题】：Ionic Angular ion-img and fallback image issueIonic Angular ion-img 和后备图像问题
【发布时间】：2021-09-25 15:56:10
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： html angular image ionic-framework

【解决方案1】：

首先，让我们看看documentation关于<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>

【讨论】：