微信小程序开发——base64位图片显示问题
前言：
目前小程序项目需要后端借口提供验证码图片，后端是以base64位返回的，按照H5的做法，前边拼上 data:image/png;base64, 应该就可以了，关键代码如下：
H5:
<img :src="asynImg" @click="getImage();" class="code">
_self.asynImg = \'data:image/png;base64,\' + response.data.data;
如此，显示正常，没有做任何特殊处理。
小程序：
<image class=\'fr\' wx:if="{{validate_code_data&&validate_code_data.data}}" src="data:image/png;base64,{{validate_code_data.data}}"></image>
当然也可以直接在js中把base64位的格式头拼接在数据的前边，这个并不影响。关键是小程序种，图片竟然不显示了，这是为什么呢？
异常解析：
看下后台返回的数据：
可以看到，后台返回的base64数据是有换行的，经查证，后端返回的base64位数据是一致的，包括编译后的html和wxml代码结构层面都是一样的，这只能说明小程序兼容性不如h5了。
那么我们就需要在小程序种对后端提供的数据进行去换行处理了，关键代码如下：
解决方案：
var base64 = res && res.data if (base64) { base64 = base64.replace(/[\r\n]/g, "") res.data = base64 self.setData({ validate_code_data: res }) }
如上，只需一行代码，即可完美展示验证码。
后记：
网上还有另一种处理方法，如下：
var array = wx.base64ToArrayBuffer(res.data) var base64 = wx.arrayBufferToBase64(array) that.setData({ captchaImage: \'data:image/png;base64,\' + base64});
这种方法是可以显示图片，但是有些不正常。具体表现是连续点击会出现图片不显示，控制台报错：
VM1437:1 thirdScriptError
"atob" failed;undefined
Error: "atob" failed
调试了下，报错的时候在第二行代码这里 var base64 = wx.arrayBufferToBase64(array) 变量已经为空了，也就是这个转换出了问题。
网上查了下，这个问题应该还是后端返回的base64串带换行导致的，如果要使用这种方式，也是需要在前边去掉换行的。
不过话又说回来了，既然去掉换行能处理这个问题，那么还何必再多加两行转换的代码呢。
请发表评论