微信小程序Base64图片不显示（Base64串存在换行问题）

背景

小程序内用wx.request来发请求，后台返回Base64流，前台用<image>标签显示。

简略代码如下：

File tfile = new File("/Users/sam/Downloads/test.jpg");
          
FileInputStream fileInputStream = new FileInputStream(tfile);

byte[] buffer = new byte[fileInputStream.available()];
fileInputStream.read(buffer);
fileInputStream.close();

BASE64Encoder base64Encoder = new BASE64Encoder();
String encodedStr = base64Encoder.encode(buffer);
outputStream.write(encodedStr.getBytes());
outputStream.close();

js中:
  onSubmit: function(e){
    var that = this;
    wx.request({
      url: 'https://127.0.0.1:9800/weapp/qrcode', 
      data: {

      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success(res) {
        that.setData({ ImageBase64Str: 'data:image/png;base64,' + res.data});
      }
    })
}

    
wxml中:
<image src='{{ImageBase64Str}}'/>

---

出现问题

• 发出POST请求后执行回调后，image里怎么也出不来东西
• 通过console输出base64串，和第三方工具生成的base64比对，内容是完全一致的
• 调试工具查看页面源码，标签里的src也注入了，没有多任何的符号
• 把图片通过在线工具转换成base64标签，直接写到wxml页面里，直接粘贴，发现编辑器报错不认，因为工具生成出来的，有换行，使用nodepad++剔除换行，再次粘贴，发现页面是能够显示的，所以并不存在其他人说的什么不支持base64编码的问题。

如图：

---

问题解决

既然能够显示，那可能是后台返回的base64串有问题，是不是换行的问题呢？

到后台断点查看数据，果然坑爹：

于是replaceAll过滤换行，再次测试，成功显示：

---

问题分析

BASE64Encoder产生的base64串带换行的，在小程序里用需要自行替换（网上的在线工具，使用的也是这个工具包啊）

---

补充阅读

• 看过其他小伙伴的博客，还有一种方法：

var array = wx.base64ToArrayBuffer(res.data)

var base64 = wx.arrayBufferToBase64(array)

that.setData({ captchaImage: 'data:image/png;base64,' + base64});

等于是后台不用处理，直接返回base64串，前台先转成ArrayBuffer，再转回base64去，其实是误打误撞去掉了换行达到同样的效果。

 

• 有同事提醒：如果使用JDK8，也可以用utils包中新的BASE64的编码/解码器，是没有换行的

 Base64.Encoder base64Encoder = Base64.getEncoder();

 String encodedStr = base64Encoder.encodeToString(buffer);