如何使用Base64设置图像源

Question

我希望将图像源设置为base64源，但它不起作用：

JSfiddle.net/NT9KB

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

JavaScript

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

- poppel

---

如果你去掉base64字符串中的换行符，它就可以运行。Fiddle已更新。 - Adriano Repetti

Answer 1

去除base64编码中的换行符:

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

- Kevin Boucher

---

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

@poppel 我认为这并不重要，但我第一次尝试修复你的代码片段是使用 setAttribute。在那之后失败了，我才注意到 base64 编码中的换行符。（由于我匆忙提交答案，所以在修复换行符后没有尝试使用 src=。） - Kevin Boucher

Answer 2

如果您希望使用jQuery从Base64设置图像：

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

- Faris Zacina

---

@TruthSerum，我们已经转向使用React技术栈，因此不再使用jQuery。但是出于好玩，你有统计证据来证明你的说法吗？你真的认为没有使用jQuery的遗留Web应用程序吗？你的评论基于个人观点，浪费了我的个人时间。另外，如果你检查项目，你会发现它仍在维护，并拥有大量的追随者。 https://github.com/jquery/jquery/commits/master - Faris Zacina

@TruthSerum，这里是一些数据统计，因为您在发表评论之前没有机会检查它们： https://www.google.com/trends/explore#q=jquery%2C%20angular&cmpt=q&tz=Etc%2FGMT-2 - Faris Zacina

现在，更新DOM应该使用prop而不是attr。attr指的是加载时的原始页面状态。 - AntonChanning

Answer 3

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

- zzart

Answer 4

你的问题在于“回车符”(carriage return)

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

你可以使用以下方法：

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

- Matías Damonte

---

这里的确切解决方案是什么？ - AHH

解决方案是从Base 64中删除换行符（回车符）。 - Kevin Boucher