webp 格式图片显示异常分析及解决方案
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
}到此这篇关于webp 格式的图片显示异常的文章就介绍到这了,更多相关webp 格式图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文详细介绍了SQLMAP的下载安装方法和基本使用方法,包括如何检测SQL注入漏洞、查看数据库信息等,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要介绍了scala中停止循环的三种方式，文中给大家提到了循环语句的流程图，感兴趣的朋友可以参考下2019-12-12
这篇文章主要介绍了OpenStack 安装 Keystone,本篇主要记录一下 openstack queens 版本 keystone 组件的安装过程，本文通过图文实例相结合给大家介绍的非常详细，需要的朋友参考下吧2022-05-05
git流水线(Pipeline)导致分支(Branch)无法合并问题及解决
这篇文章主要介绍了git流水线(Pipeline)导致分支(Branch)无法合并问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
如何通过memberlist库实现gossip管理集群及集群数据交互问题
这篇文章主要介绍了通过memberlist库实现gossip管理集群以及集群数据交互,本文介绍了memberlist库的简单用法，结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
学习编程的人对Get方法和Post方法并不陌生吧，GET是从服务器上获取数据，POST是向服务器传送数据，不了解的朋友可以详细参考下2013-10-10
Objective-C 动态调用NSInvocation 的方法
NSInvocation是Objective-C编程中一个强大的特性,它允许开发者在运行时动态地调用方法,本文详细介绍了如何使用NSInvocation来获取方法的选择器、创建实例、设置目标对象和方法参数,并执行方法,感兴趣的朋友跟随小编一起看看吧2024-09-09
在Git中回退到指定版本并不是删除或撤销之前的提交,而是创建一个新的提交,该提交包含指定版本的内容,这篇文章主要给大家介绍了关于Git回退到指定版本三种方法及常见的错误,需要的朋友可以参考下2024-03-03
从console.log说起(console.log详细介绍)
console.log，作为一个前端开发者，可能每天都会用它来分析调试，但这个简单函数背后不简单那一面,这篇文章就为大家介绍一下2017-09-09
抓包工具Fiddler的使用方法详解(Fiddler中文教程)
本文详细说明了抓包工具Fiddler的使用方法与各个面板的功能介绍 每个按钮都说明了他的功能，完全可以当作Fiddler的中文教程了2018-10-10
最新评论