如何使用base64设置图像源

93

我想将Image源设置为base64源，但是它不起作用：

<img id="img" src="" />

JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="

javascript base64

— Poppel
source

9

如果您删除base64字符串中的换行符，它将起作用。小提琴更新。

— 阿德里亚诺·雷佩蒂

136

尝试setAttribute改用：

document.getElementById('img')
    .setAttribute(
        'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
    );

真实答案：（ 并确保您删除了base64中的换行符。）

— 凯文·布歇
source

thx，我会在10分钟内接受，为什么setAttribute更好？

— Poppel

@poppel我认为这并不重要，但是我修复您的小提琴的第一个尝试是使用setAttribute。就是在那次失败之后，我才注意到base64编码中的换行符。（由于我急于提交答案，所以src=在修复换行符后没有尝试过。）

— Kevin Boucher

26

如果您更喜欢使用jQuery从Base64设置图像，请执行以下操作：

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

— 法里斯·扎西纳（Faris Zacina）
source

5

@TruthSerum我们不使用它，因为我们切换到React堆栈。但是为了娱乐，您是否有统计证据证明您的主张？您是否真的认为没有使用jQuery的旧版Web应用程序？您的评论基于您的个人意见，实际上是在浪费我的个人时间。另外，如果您检查项目，则该项目仍将维护，并且拥有庞大的关注者基础。github.com/jquery/jquery/commits/master

— Faris Zacina

5

此外@TruthSerum这里有一些统计数据，因为你没有得到一个机会，您发表评论之前检查他们：google.com/trends/...

— 法里斯Zacina

这些天，prop应该用来代替attrDOM。attr指加载时的原始页面状态。

— 安东·詹宁

6

img = new Image();
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
img.outerHTML;
"<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">"

— 扎特
source

3

您的问题是cr（回车）

http://jsfiddle.net/NT9KB/210/

您可以使用：

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

— MatíasDamonte
source

确切的解决方案是什么？

— AHH

这里的解决方案是去除从基本64.换行符（回车）

— 凯文鲍彻