浅谈微信小程序中的坑之一：图片不能正常显示

在开发微信小程序的时候遇到了这样一个情况：

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;
}