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>
相关推荐
zwjapple19 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python