Skip to content

base 64 图片显示不成功

问题

最近在写微信小程序时遇到一个需求:

后端返回一个 base 64 图片,需要显示到首页上。

听起来很简单,只需要拿到后端返回的串,安装一个文件头就可以直接使用。

但是!!!命运多舛,怎么搞这个图片也显示不出来,更换文件头在浏览器里也无法打开。

解决方法

后来后端同学在本地运行了一下,确定图片是没问题的。

但是这段代码在我这边却死活运行不起来,后来一对比数据串根本不一样。

因为数据串太长,数据在传输过程中自动添加了 \n 字符,到了浏览器直接无法成功解析,就遇到了这个问题。

解决方法也很简单,只要在获取之后去除一下换行符就可以了。

代码块:

js
let { code } = this.getQRCode() // 获取用户二维码数据
this.QRCode = `data:image/png;base64,${code.replace(/[\r\n]/g, '')}` // 添加文件头并去除换行符

最后直接放在 src 使用,完美解决。

Released under the MIT License.