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

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

浏览量:1417 时间: 来源:Alun_sdz

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

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

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎