在开发微信小程序的时候遇到了这样一个情况:
1、问题描述:
在开发者工具中:选择手机型号是 iPhone6,所有图片能够正常显示;
在微信小程序体验版本和正式版本中,安卓手机图片能正常显示,ios手机图片不能正常显示。
另外一个开发问题是:
微信小程序 视频封面 在ios上面不能正常显示(这个首先检查是不是图片的格式问题)
2、原因:
图片的格式是 webp 格式,ios 不支持 webp 格式的显示。
3、分析:
(1)什么是 webp 格式?
WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器宽带资源和数据空间。
WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件,编码同样质量的WebP文件需要占用更多的计算资源。
桌面版Chrome可打开WebP格式。 -- 摘自百度百科
(2)比较:
普通文件路径:https://xxx.jpeg?
webp文件路径:https://xxx.jpeg?%2Fformat%2Fwebp 或者 https://xxx.webp
4、解决方法 :
(1)从服务端将 webp 文件转化成其他文件的格式;
(2)使用正则表达式替换,比如(需要根据实际情况进行处理):
// 将webp图片转抓成普通图片
function formatWebp(str) {
str = str.replace('%2Fformat%2Fwebp', "");
return str;
}