微信小程序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:img/jpg;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:img/jpg;base64,' + base64});

等於是後臺不用處理，直接返回base64串，前臺先轉成ArrayBuffer，再轉回base64去，其實是誤打誤撞去掉了換行達到同樣的效果。

第一次涉足小程序開發，查了不少文章，但是都沒有效果，真是搞暈了，其實每個人出現問題時的情況都不同，還是仔細分析下爲好。