如何使用 base64 设置图像源

IT技术 javascript base64
2021-01-28 08:07:29

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

JSfiddle.net/NT9KB

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

JavaScript

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

尝试使用setAttribute：

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

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

@poppel 我认为这不重要，但我第一次尝试修复你的小提琴是使用setAttribute. 在那次失败之后，我注意到 base64 编码中的换行符。（因为我急于得到提交的答案，所以src=在修复换行符后我没有尝试。）
2021-04-01 08:07:29
thx，我会在10分钟内接受，为什么setAttribute更好？
2021-04-02 08:07:29

如果您更喜欢使用 jQuery 从 Base64 设置图像：

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
@TruthSerum 我们没有使用它，因为我们切换到 React 堆栈。但为了好玩，你有统计证据来证明你的主张吗？你真的认为没有使用 jQuery 的遗留网络应用程序吗？你的评论是基于你的个人意见，真的是在浪费我的个人时间。此外，如果您检查该项目，它仍然得到维护并且拥有庞大的追随者基础。github.com/jquery/jquery/commits/master
2021-03-25 08:07:29
另外@TruthSerum 这里有一些统计数据，因为您在发表评论之前没有机会检查它们：google.com/trends/...
2021-04-02 08:07:29
这些天，prop应该用于而不是attr更新 DOM。attr指加载时的原始页面状态。
2021-04-07 08:07:29 
img = new Image();
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
img.outerHTML;
"<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">"

你的问题是 cr（回车）

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

您可以使用： 

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
这里的解决方案是从 Base 64 中删除换行符（回车）。
2021-03-30 08:07:29
这里的解决方案是什么？
2021-04-07 08:07:29
其它你可能感兴趣的问题
上一篇在NodeJS中获取Mongo数据库中插入文档的_id 下一篇typescript编译为单个文件