小程序中正确的base64在image组件中显示白色, 求解决方法?
发布于 3 年前 作者 xietao 7828 次浏览 来自 官方Issues

base64如下

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAqCAYAAADbCvnoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ

bWFnZVJlYWR5ccllPAAAA+ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp

bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6

eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2

MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo

dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw

dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv

IiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1N

PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25z

LmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJB

ZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMS0wMi0wM1Qx

ODowNzoyMiswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjEtMDItMDNUMTg6MDg6NTMrMDg6MDAi

IHhtcDpNZXRhZGF0YURhdGU9IjIwMjEtMDItMDNUMTg6MDg6NTMrMDg6MDAiIGRjOmZvcm1hdD0i

aW1hZ2UvcG5nIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkQxRjZDNDk1NjYwNzExRUI5N0M1

Qjk5Q0U3MTVBMTExIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkQxRjZDNDk2NjYwNzExRUI5

N0M1Qjk5Q0U3MTVBMTExIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9Inht

cC5paWQ6RDFGNkM0OTM2NjA3MTFFQjk3QzVCOTlDRTcxNUExMTEiIHN0UmVmOmRvY3VtZW50SUQ9

InhtcC5kaWQ6RDFGNkM0OTQ2NjA3MTFFQjk3QzVCOTlDRTcxNUExMTEiLz4gPC9yZGY6RGVzY3Jp

cHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7xQJHXAAAD

3klEQVR42txYa0hUQRTe3VSUsOfmj8jKkLJAetIDe0DR408RZJFSxgZpRQVZFEEPKoqKQu2NkRbR

g1CzLKo/UWFBT8ygREX7sUGaZPbQatXtO3BuTMPssnfudZMOfMzc3blzvztz5jvnXKff73foWFrh

68FongE1lz3JUx02mcvCveOAOCAF5Hp3B0KiObsbIcd/S8gZyKnhF7QNacByIBGIlIbQ9UCgA/BK

//mAOuACcAlO32mJEMj0QHMFSLXhpW/QPCDlC2VwRIDftwlkrgG3+a1DNZp3NrAEWADsBHZorRCv

TgPQHziCN9usuzSYay+a7cAXkgjM9VPHqROZDNkhi9t1mNtewAjdUxZjdPBGjVbY4P4WXh2yft3l

2JuKTRGavhGNZj3gAShs3CLHxYp8CLswgsxiNG/Zv0ayFq0CqvDfGsAVFkJ40ASgHN2rwFDFEFqp

k8BjjButSygiBCK0AvuBjBCD6CTgBe7LRbvL1hXCpCRo1cAKkxGdtGwTb22k1RUSH7zboo/GC/04

00qNFZmMJh9I7oLj38aqfRSnsT0oIRAZhP5BID0MulQBZIHUUyWhpQWVc9CWAD3DmPZQOrISpM6r

nPp4mMkYz81RaRb9kPCPksO+QLTqlL0Cxnfhg78Dd4FKoIWJUOR3Y8taVYSKu4hQEydlhUYehC2K

Qb8t6LGHUyexgNlplEuv5kjv4cyR6rhY4BeLbRmFGhD0qo79Gw6UdlgOHpKNOeexppE4NvNWyYUA

FQh7gAO4xy+GjmKbyNyhkAEy6ZySEJl7fHBeCuNuclbawHHyLFc5fwiV2kDmB5AJjAXOCXPP5ESf

VqyWs4VFwAZgCI+hbc3+K3SA4TthgI6dwLKvwzwP0J+u2J6FvEofgX3AVsVpTBCDa7HBUteRKWeS

yJBzf+I+fSG5D0xk/cnjVczgXIrEOVMkVGqBEL3dc6n26uAo0Cgk/a0gXY9urlD9TgPG8PV8Ubof

sZPpWB0eRgSSpJzoCVAvwMEVsXFdLZAhS3IJ7DstOLexLW7Ffxd5e/L4uoj7x4CvchosJ2hUNmdp

EHIL6izbKeC9cF3EPhQFzAJGCf81y4RIMz4DfUwSGsYluErxy6VslLZsRoB5qlxSpelj0TJrVO1O

Aa5b1LIyVZJfojkZJVwVvMo6RpnAGVcA+W/VmHAZtm042o0cQM0aVb5NLsUHgjaWd7NGmlJAfsBi

164oq2LFjxmCneZTF7Au2wI81CCVQvkPn6S5gvYY5mWlFgWVxHitEe2dwT6c443ihW9FZqwWD/iG

+6O4yEzloDuAtaeGD0C+/IHitwADANYtMqKhwU/XAAAAAElFTkSuQmCC

3 回复

可以看下是否设置了宽高和 mode 属性

找到问题了, 是由于base64字符太长了, 导致image组件被拆分, 从而编译失败, 解决办法如下:

把需要渲染的base64字符串用模板字符串包起来(``), 就是这个es6的东西, 然后将字符串replace(/[\r\n]/g, “”)一下. 这样动态绑定到image标签上就可以渲染出来了

组件没问题检查你自己的代码

回到顶部