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>
相关推荐
剑亦未配妥25 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_9181269110 小时前
用html5写一个flappybird游戏
css·游戏·html5
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光10 小时前
css之一个元素可以同时应用多个动画效果
前端·css