base 64 图片显示不成功
问题
最近在写微信小程序时遇到一个需求:
后端返回一个 base 64
图片,需要显示到首页上。
听起来很简单,只需要拿到后端返回的串,安装一个文件头就可以直接使用。
但是!!!命运多舛,怎么搞这个图片也显示不出来,更换文件头在浏览器里也无法打开。
解决方法
后来后端同学在本地运行了一下,确定图片是没问题的。
但是这段代码在我这边却死活运行不起来,后来一对比数据串根本不一样。
因为数据串太长,数据在传输过程中自动添加了 \n
字符,到了浏览器直接无法成功解析,就遇到了这个问题。
解决方法也很简单,只要在获取之后去除一下换行符就可以了。
代码块:
js
let { code } = this.getQRCode() // 获取用户二维码数据
this.QRCode = `data:image/png;base64,${code.replace(/[\r\n]/g, '')}` // 添加文件头并去除换行符
最后直接放在 src
使用,完美解决。