微信小程序图片显示不出来的问题 100%管用

置顶古道边.

已于 2022-07-14 11:06:58 修改

阅读量1.1w

点赞数 11

文章标签：微信小程序小程序前端 javascript

于 2022-07-14 11:06:49 首次发布

本文链接：https://blog.csdn.net/qq_61033782/article/details/125779838

版权

本文介绍了微信小程序中图片在模拟器显示正常，但在真机上（尤其是安卓设备）无法显示的常见问题及解决方案。问题根源在于安卓端需要图片以base64格式展示。提供了一个将后端返回的url转换为base64的工具函数，通过uni.request获取arraybuffer响应，然后转换为base64字符串，从而确保图片在所有平台上正确显示。

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

相信大多数微信小程序的开发者都会遇到的一个问题就是图片在模拟器上能显示跑到真机上就不行，而且ios能显示安卓却显示不了的问题，这个问题也是困扰了我很久，最终想到了解决方案。

大多数情况下都是后端返回一个url地址然后我们再拿基准路径去拼接 ok这没问题在pc端和ios都可以显示，但是安卓不行，因为我们拼接的这个路径实际上返回来的是一个流我们需要进行处理转换成base64格式才能正常显示而pc和ios可能内部做了处理所以能显示出来。

为此我封装了一个小工具话不多说上代码：

如果后端返回的ulr路径最后没带文件名可以把fileNmae注释掉以免报错，然后resolve那里写死成jpeg(正常情况都会带上)

使用方法：

fileStreamturn: function(url) {
  return new Promise(function(resolve,reject) {
    uni.request({
          url: url,
          method: 'GET',
          responseType: 'arraybuffer',
          header:{
            Authorization: token
          },
          success: res => {
            let datas = res.data;
        let fileName = url.slice(url.indexOf('.')+1)
            resolve(`data:image/${fileName};base64,`+uni.arrayBufferToBase64(datas))
          },
        });
  })
},