如果支持，如何加载一个图像，如果不在 HTML 中，如何加载另一个图像答案

【问题标题】：How to load one image if sopported or another if not in HTML如果支持，如何加载一个图像，如果不在 HTML 中，如何加载另一个图像
【发布时间】：2019-07-24 15:02:12
【问题描述】：

我一直在改造一个网站以优化 SEO。我做的一件事是使用 Google 的 Webp 格式优化图像。但是任何版本的 Safari 都不支持 Webp。

我的问题是：如果支持，我该怎么做才能加载一个图像 (Webp)，如果不支持，我可以加载另一个像 JPG 这样的图像。

如果它是类似音频或视频标签的东西，那就太好了

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
   Your browser does not support the audio tag.
</audio>

【问题讨论】：

标签： php html

【解决方案1】：

像下面这样添加你的代码，它应该很可能工作。

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg">
</picture>

这里提到了更多细节in this link。

【讨论】：

【解决方案2】：

我假设您在 src 中（在 img 标签中）仅使用 1 个图像，如果无法加载，那么您正在尝试借用任何其他图像。所以，你可以使用

<img src="invalid_link" onerror="this.onerror=null;this.src='other_image_url';">

希望这会有所帮助。

【讨论】：