webp图片在IOS11中不展示

WebP是一种现代图像格式,提供了优于JPEG和PNG的压缩率,但它的支持在不同浏览器和操作系统中有所不同。iOS 11及其之前的版本不支持WebP格式。

<picture>

HTML <picture> 元素 通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素,如果没有匹配的,就选择 <img> 元素的 src 属性中的 URL。然后,所选图象呈现在<img>元素占据的空间中。

html 复制代码
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

<img> 元素有两个目的:

  • 描述图像的大小和其他属性及其呈现。
  • 在所有的 <source> 元素提供的图片都不可用时提供备选图片。

<picture> 的常见使用场景:

  • 艺术指导 (Art direction)。针对不同 media 条件裁剪或修改图像(例如,在较小的显示器或图像的详细内容太多时显示较为图像的简单版本)。
  • 遇到不支持的特定格式时,提供替代的图像格式
  • 通过加载最适合观看者显示的图像来节省带宽和提高页面加载速度

解决方案

html 复制代码
<picture>
    <source srcset="../../../assets/img/aaa.webp" type="image/webp">
    <source srcset="../../../assets/img/aaa.gif" type="image/gif">
    <img @click="goTo()" src="../../../assets/img/aaa.gif">
</picture>
相关推荐
转转技术团队11 分钟前
多代理混战?用 PAC(Proxy Auto-Config) 优雅切换代理场景
前端·后端·面试
南囝coding12 分钟前
这几个 Vibe Coding 经验,真的建议学!
前端·后端
gnip26 分钟前
SSE技术介绍
前端·javascript
yinke小琪41 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿44 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux1 小时前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵1 小时前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆1 小时前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
again4321 小时前
css生效规则
css
豆苗学前端1 小时前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试