有没有办法将背景图像设置为base64编码的图像？
有没有办法将背景图像设置为base64编码的图像？
提问于 2013-06-13 23:07:10
我想在JS中动态更改背景，并且我的图像集是base64编码的。我试着：
document.getElementById("bg_image").style.backgroundImage =
"url('http://amigo.com/300107-2853.jpg')"; 完美的结果，
然而，我没有做到同样的事情：
document.getElementById("bg_image").style.backgroundImage =
"url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')";nor
document.getElementById("bg_image").style.backgroundImage =
"data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";有什么办法可以做到吗？
回答 10
Stack Overflow用户
回答已采纳
发布于 2013-06-14 00:17:55
我也试过和您一样，但显然backgroundImage不能处理编码数据。作为另一种选择，我建议使用CSS类以及这些类之间的变化。
如果您正在“动态”生成数据，则可以动态加载CSS文件。
function change() {
if (document.getElementById("test").className == "backgroundA") {
document.getElementById("test").className = "backgroundB";
document.getElementById("test2").className = "backgroundA";
} else {
document.getElementById("test").className = "backgroundA";
document.getElementById("test2").className = "backgroundB";
}
}
btn.onclick = change;.backgroundA {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==");
}
.backgroundB {
background-image: url("data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=");
}<div id="test" height="20px" class="backgroundA">
div test 1
</div>
<div id="test2" name="test2" height="20px" class="backgroundB">
div test2
</div>
<input type="button" id="btn" />
我在这里摆弄它，按下按钮，它将切换div的背景：http://jsfiddle.net/egorbatik/fFQC6/
Stack Overflow用户
发布于 2015-02-03 06:57:57
base64也有同样的问题。对于将来遇到同样问题的任何人：
url = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";这将从控制台执行，但不是从脚本中执行：
$img.css("background-image", "url('" + url + "')");但在尝试了一下之后，我想出了这个：
var img = new Image();
img.src = url;
$img.css("background-image", "url('" + img.src + "')");不知道为什么它与代理图像一起工作，但它确实如此。在Firefox Dev 37和Chrome 40上测试。
希望这能帮助到别人。
编辑
更深入的研究。似乎有时base64编码(至少在我的例子中)会因为编码值(在我的例子中，值是由ActionScript动态生成)中的换行而中断。
简单地使用例如：
$img.css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");同样有效，甚至似乎比使用代理镜像快几毫秒。
Stack Overflow用户
发布于 2014-10-10 16:46:03
试一试，我得到了成功的响应..它正在工作
$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17090571
复制相关文章
相似问题
腾讯云开发者
