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

本文探讨了微信小程序在iOS设备上无法显示webp格式图片的问题,分析了webp格式的特点及与iOS的兼容性问题,提供了从服务端转换图片格式和使用正则表达式替换的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

 

 

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值