webp 格式图片显示异常分析及解决方案
作者:我爱语文 发布时间:2023-08-26 22:33:27
webp 格式的图片显示异常
webp介绍
WebP,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,能节省大量的服务器带宽资源和数据空间。
webp转换
右键点击图片,点击【在新标签页中打开图片】。
若是看到地址栏的后缀是webp,把webp改为jpg/png,回车。然后再点击图片,选择【另存为】,图片存储为jpg/png。
若看到地址栏的后缀不是webp,点击图片,选择【另存为】,图片存储为wenp格式的。然后再次打开存在本地webp格式图片,看到地址栏的后缀是webp,按照步骤二继续操作。
踩坑:直接修改图片的后缀名不可取,没有改变原图片的属性,其实还是webp的格式。也可以通过转换工具或者命令行进行转换。
webp兼容性
目前网页浏览器当中,Google Chrome和Opera原生支持静态与动态的WebP格式。Firefox浏览器亦在65.0版本支持WebP图像。
苹果在macOS Sierra及iOS 10的早期beta版本中加入了WebP支持。而在2016年9月7日发布的iOS 10 和 macOS Sierra GM种子版本中却移除了WebP的支持。
总结,webp 在 ios5/6 的 chrome、safari 浏览器不支持,在 Android 常用的浏览器都支持。
兼容解决方案
前端js的方案还未实践,想实践的可参考原文[3]。
简单方案,把webp格式转为png,在项目中使用,保正图片在各设备正常显示。
参考原文链接:
[1] https://developers.google.com/speed/webp
[2] https://zh.wikipedia.org/wiki/WebP
[3] https://segmentfault.com/a/1190000004948757
附录:解决 .webp 格式图片在 ios 设备上无法正常显示的问题
解决.webp 格式图片在 ios 设备上无法正常显示的问题
使用字符串的 replace() 方法,将 webp 的后缀名替换为 jpg 的后缀名
// 定义请求商品详情数据的方法
async getGoodsDetail(goods_id) {
const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
if (res.meta.status !== 200) return uni.$showMsg()
// 使用字符串的 replace() 方法,将 webp 的后缀名替换为 jpg 的后缀名
res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
this.goods_info = res.message
}
来源:https://blog.csdn.net/weixin_47049504/article/details/116465034
猜你喜欢
- 在我们有时需要迁移或部署项目时,需要知道项目所依赖的三方包和版本,下面就来一看一看该如何获取吧:1、首先安装pipreqs库使用pip命令,
- 最近在学习算法,经常遇到一行有多个数据,用空格或者','进行分割。最开始不懂,直接百度,n = input()n = int
- 今天试着用python获取金山词霸的翻译功能,链接在这里:ICIBA传送门打开之后,界面是这样的,还是比较干净的。按F12,打开调试工具,选
- concat 与其说是连接,更准确的说是拼接。就是把两个表直接合在一起。于是有一个突出的问题,是横向拼接还是纵向拼接,所以concat 函数
- 客户端从服务端下载文件的流程分析: 浏览器发送一个请求,请求访问服务器中的某个网页(如:down.php),该网页的代码如下。 服务器接受到
- 本文实例讲述了Python常用模块sys,os,time,random功能与用法。分享给大家供大家参考,具体如下:sys:介绍:主要包含涉及
- 介绍Silk是Django框架的实时分析和检查工具。源代码名称:django-silk源代码网址: http://www.git
- 前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专
- 在python中读取csv文件时,一般操作如下:import pandas as pdpd.read_csv(filename)该读文件方式
- wechat_sender 是基于 wxpy 和 tornado 实现的一个可以将你的网站、爬虫、脚本等其他应用中各种消息 (日志、报警、运
- 本文实例讲述了Python实现方便使用的级联进度信息的方法。分享给大家供大家参考。具体实现方法如下:class StepedProgress
- 在需要使用到大批量数据的时候,即可以使用随机数据进行生成操作Faker的介绍Faker是python方向的一个第三方库,主要用来创造伪数据,
- shutil --High-level file operations 高级的文件操作模块os模块提供了对目录或者文件的新建/删除/查看文件
- 1.join函数的语法及用法(1)语法:'sep'.join(sep_object)参数说明sep:分割符,可为&l
- 原文件:7.8094,1.0804,5.7632,0.012269,0.008994,-0.003469,-0.79279,-0.06468
- 大家在安装程序或下载文件时,通常都能看到进度条,提示你当前任务的进度。其实,在python中实现这个功能很简单,下面是具体代码。在实际应用中
- 大家在使用ASP设计用户提交表单的时候,如果涉及到网址输入框,那么相信都有可能会用到这个效果,使用正则表达式验证网址合法性。代码如下:<
- 简介ORA-10458: standby database requires recoveryORA-01196: 文件 1 由于介质恢复会
- 使用 pd.Series把dataframe转成Seriests = pd.Series(df['Value'].value
- 前两天研究了一下textarea的直观行的换行规律,挺复杂啊:直观行怎样取不光要看cols大小,还要看网页编码方式。cols="3