blocks|key|3982866|text|我也试过和您一样，但显然backgroundImage不能处理编码数据。作为另一种选择，我建议使用CSS类以及这些类之间的变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3982867|如果您正在“动态”生成数据，则可以动态加载CSS文件。|3982868|​|3982869|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;|code-block|syntax|javascript|3982870|.backgroundA+{
++background-image:+url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB/CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg==");
}

.backgroundB+{
++background-image:+url("data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe%2BMp%2BL4rphz%2BqIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5%2Bg4JADs=");
}|3982871|<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"+/>|3982872|3982873|我在这里摆弄它，按下按钮，它将切换div的背景：http://jsfiddle.net/egorbatik/fFQC6/|offset|length|3982874|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/egorbatik/fFQC6/^0|0|0|0|0|0|0|0|O|10|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|14|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|16|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|18|8|@]|9|@$R|19|S|1A|1|1B]]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

<p>I tried to do the same as you, but apparently the backgroundImage doesn't work with encoded data. As an alternative, I suggest to use CSS classes and the change between those classes.</p>
<p>If you are generating the data &quot;on the fly&quot; you can load the CSS files dynamically.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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=");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test" height="20px" class="backgroundA"&gt;
  div test 1
&lt;/div&gt;
&lt;div id="test2" name="test2" height="20px" class="backgroundB"&gt;
  div test2
&lt;/div&gt;
&lt;input type="button" id="btn" /&gt;</code></pre>
</div>
</div>
</p>
<p>I fiddled it here, press the button and it will switch the divs' backgrounds: <a href="http://jsfiddle.net/egorbatik/fFQC6/" rel="nofollow noreferrer">http://jsfiddle.net/egorbatik/fFQC6/</a></p>


blocks|key|3982893|text|我通常会先将完整的字符串存储到一个变量中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3982894|<?php
$img_id+=+'data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAY...';
?>|code-block|syntax|javascript|3982895|然后，我希望任一JS对该变量做一些事情：|3982896|<script+type="text/javascript">
document.getElementById("img_id").backgroundImage="url('<?php+echo+$img_id;+?>')";
</script>|3982897|您可以通过PHP直接引用相同的变量，如下所示：|3982898|<img+src="<?php+echo+$img_id;+?>">|3982899|适用于我;)|3982900|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>What I usually do, is to store the full string into a variable first, like so:</p>

<pre><code>&lt;?php
$img_id = 'data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAY...';
?&gt;
</code></pre>

<p>Then, where I want either JS to do something with that variable:</p>

<pre><code>&lt;script type="text/javascript"&gt;
document.getElementById("img_id").backgroundImage="url('&lt;?php echo $img_id; ?&gt;')";
&lt;/script&gt;
</code></pre>

<p>You could reference the same variable via PHP directly using something like:</p>

<pre><code>&lt;img src="&lt;?php echo $img_id; ?&gt;"&gt;
</code></pre>

<p>Works for me ;)</p>


blocks|key|611785|text|试一试，我得到了成功的响应..它正在工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|611786|$("#divId").css("background-image",+"url('data:image/png;base64,"+%2B+base64String+%2B+"')");|code-block|syntax|javascript|611787|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this,
I have got success response ..it's working</p>

<pre><code>$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");
</code></pre>


blocks|key|3982982|text|base64也有同样的问题。对于将来遇到同样问题的任何人：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3982983|url+=+"data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";|code-block|syntax|javascript|3982984|这将从控制台执行，但不是从脚本中执行：|3982985|$img.css("background-image",+"url('"+%2B+url+%2B+"')");|3982986|但在尝试了一下之后，我想出了这个：|3982987|var+img+=+new+Image();
img.src+=+url;
$img.css("background-image",+"url('"+%2B+img.src+%2B+"')");|3982988|不知道为什么它与代理图像一起工作，但它确实如此。在Firefox+Dev+37和Chrome+40上测试。|3982989|希望这能帮助到别人。|3982990|编辑|offset|length|style|BOLD|3982991|更深入的研究。似乎有时base64编码(至少在我的例子中)会因为编码值(在我的例子中，值是由ActionScript动态生成)中的换行而中断。|3982992|简单地使用例如：|3982993|$img.css("background-image",+"url('"+%2B+url.replace(/(\r\n%7C\n%7C\r)/gm,+"")+%2B+"')");|3982994|同样有效，甚至似乎比使用代理镜像快几毫秒。|3982995|entityMap^0|0|0|0|0|0|0|0|0|0|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1G|8|@$U|1H|V|1I|W|X]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1J|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1K|8|@]|9|@]|A|$]]|$1|12|3|13|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|14|3|15|5|6|7|1M|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|17|$]]

<p>Had the same problem with base64. For anyone in the future with the same problem:</p>

<pre><code>url = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";
</code></pre>

<p>This would work executed from console, but not from within a script:</p>

<pre><code>$img.css("background-image", "url('" + url + "')");
</code></pre>

<p>But after playing with it a bit, I came up with this:</p>

<pre><code>var img = new Image();
img.src = url;
$img.css("background-image", "url('" + img.src + "')");
</code></pre>

<p>No idea why it works with a proxy image, but it does. Tested on Firefox Dev 37 and Chrome 40.</p>

<p>Hope it helps someone.</p>

<p><strong>EDIT</strong></p>

<p>Investigated a little bit further. It appears that sometimes base64 encoding (at least in my case) breaks with CSS because of line breaks present in the encoded value (in my case value was generated dynamically by ActionScript). </p>

<p>Simply using e.g.:</p>

<pre><code>$img.css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");
</code></pre>

<p>works too, and even seems to be faster by a few ms than using a proxy image.</p>


blocks|key|1752892|text|这是进行纯调用的正确方式。没有CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1752893|<div+style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x+center;'></div>|code-block|syntax|javascript|1752894|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is the correct way to make a pure call. No CSS. </p>

<pre><code>&lt;div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'&gt;&lt;/div&gt;
</code></pre>


blocks|key|1858653|text|我尝试过这个(对我来说很有效)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1858654|var+img+=+'data:image/png;base64,+...';+//place+ur+base64+encoded+img+here
document.body.style.backgroundImage+=+'url(\''+%2B+img+%2B+'\')';|code-block|syntax|javascript|1858655|ES6语法：|1858656|let+img+=+'data:image/png;base64,+...'
document.body.style.backgroundImage+=+`url('${img}')`|1858657|更好一点：|1858658|let+setBackground+=+src+=>+{
++++this.style.backgroundImage+=+`url('${src}')`
};

let+node+=+nodeIGotFromDOM,+img+=+imageBase64EncodedFromMyGF;
setBackground.call(node,+img);|1858659|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I tried this (and worked for me):</p>
<pre><code>var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(\'' + img + '\')';
</code></pre>
<p>ES6 syntax:</p>
<pre><code>let img = 'data:image/png;base64, ...'
document.body.style.backgroundImage = `url('${img}')`
</code></pre>
<p>A bit better:</p>
<pre><code>let setBackground = src =&gt; {
    this.style.backgroundImage = `url('${src}')`
};

let node = nodeIGotFromDOM, img = imageBase64EncodedFromMyGF;
setBackground.call(node, img);
</code></pre>


blocks|key|3983063|text|将这个技巧添加到gabriel+garcia的以下解决方案中-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3983064|var+img+=+'data:image/png;base64,+...';+//place+ur+base64+encoded+img+here
document.body.style.backgroundImage+=+'url('+%2B+img+%2B+')';|code-block|syntax|javascript|3983065|然而，在我的例子中，这是不起作用的。将url移到img变量中可以做到这一点。因此，最终的代码如下所示|3983066|var+img+=+"url('data:image/png;base64,+"%2Bbase64Data+%2B+"')";
document.body.style.backgroundImage+=+img;+|3983067|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Adding this trick to gabriel garcia's following solution - </p>

<pre><code>var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(' + img + ')';
</code></pre>

<p>However, in my case this wasn't working. Moving url into the img variable did the trick. SO the final code looked like this</p>

<pre><code>var img = "url('data:image/png;base64, "+base64Data + "')";
document.body.style.backgroundImage = img; 
</code></pre>


blocks|key|1858692|text|在我的例子中，这只是因为我没有设置height和width。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1858693|但还有另一个问题。|1858694|可以使用以下命令删除背景图像|1858695|element.style.backgroundImage=""|1858696|但不能使用|1858697|element.style.backgroundImage="some+base64+data"|1858698|Jquery运行良好。|1858699|entityMap^0|H|6|O|5|0|0|0|0|W|0|0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|13|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|17|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|S|$]]

<p>In my case, it was just because I didn't set the <code>height</code> and <code>width</code>.</p>

<p>But there is another issue.</p>

<p>The background image could be removed using</p>

<p><code>element.style.backgroundImage=""</code></p>

<p>but couldn't be set using</p>

<p><code>element.style.backgroundImage="some base64 data"</code></p>

<p>Jquery works fine.</p>


blocks|key|3983108|text|我认为这会有所帮助，CSS以不同的方式处理base64，您应该将图像的数据类型设置为Base64，这将有助于CSS将base64更改为图像并将其显示给用户。您可以在javascript中使用它，方法是使用jquery脚本分配背景图像，它会自动将base64更改为mage并显示它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3983109|​|3983110|url+=+"data:image;base64,"%2Bdata.replace(/(\r\n%7C\n%7C\r)/gm,+"");
$("body").css("background-image",+"url('"+%2B+url.replace(/(\r\n%7C\n%7C\r)/gm,+"")+%2B+"')");|code-block|syntax|javascript|3983111|3983112|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>I think this will help,
Base64 is addressed by CSS in a different way, you should set the data type of the image to base64, this will help the CSS to change the base64 to image and display it to the user. and you can use this from javascript by assigning the background image using the jquery script, it will automatically change the base64 to mage and display it</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>url = "data:image;base64,"+data.replace(/(\r\n|\n|\r)/gm, "");
$("body").css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");</code></pre>
</div>
</div>
</p>


blocks|key|611904|text|在使用data+URIs时，不要在url中使用引号。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|611905|li+{
++background:
++++url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
++++no-repeat
++++left+center;
++padding:+5px+0+5px+25px;
}|code-block|syntax|javascript|611906|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/data-uris/^0|H|3|3|9|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>Do <strong>not</strong> use quotes inside <code>url</code> when using <a href="https://css-tricks.com/data-uris/" rel="nofollow noreferrer">data URIs</a>.</p>
<pre class="lang-css prettyprint-override"><code>li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}
</code></pre>


<p>I want to change background dynamically in JS and my set of images is in base64 encoded.
I try:</p>

<pre><code>document.getElementById("bg_image").style.backgroundImage = 
   "url('http://amigo.com/300107-2853.jpg')"; 
</code></pre>

<p>with perfect result, </p>

<p>yet I fail to do the same with:   </p>

<pre><code>document.getElementById("bg_image").style.backgroundImage = 
   "url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')";
</code></pre>

<p>nor </p>

<pre><code>document.getElementById("bg_image").style.backgroundImage = 
   "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";
</code></pre>

<p>Is there any way to do it?</p>


Is there a way to set background-image as a base64 encoded image?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想在JS中动态更改背景，并且我的图像集是base64编码的。我试着：document.getElementById("bg_image").style.backgroundImage =    "url('http://amigo.com/300107-2853.jpg')"; 完美的结果，然而，我没有做到同样的事情...

问有没有办法将背景图像设置为base64编码的图像？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法将背景图像设置为base64编码的图像？EN