Is there a way to set background-image as a base64 encoded image?
JavascriptBase64Background ImageJavascript Problem Overview
I want to change background dynamically in JS and my set of images is in base64 encoded. I try:
document.getElementById("bg_image").style.backgroundImage =
"url('http://amigo.com/300107-2853.jpg')";
with perfect result,
yet I fail to do the same with:
document.getElementById("bg_image").style.backgroundImage =
"url('data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...')";
nor
document.getElementById("bg_image").style.backgroundImage =
"data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";
Is there any way to do it?
Javascript Solutions
Solution 1 - Javascript
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.
If you are generating the data "on the fly" you can load the CSS files dynamically.
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" />
I fiddled it here, press the button and it will switch the divs' backgrounds: http://jsfiddle.net/egorbatik/fFQC6/
Solution 2 - Javascript
Had the same problem with base64. For anyone in the future with the same problem:
url = "data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE...";
This would work executed from console, but not from within a script:
$img.css("background-image", "url('" + url + "')");
But after playing with it a bit, I came up with this:
var img = new Image();
img.src = url;
$img.css("background-image", "url('" + img.src + "')");
No idea why it works with a proxy image, but it does. Tested on Firefox Dev 37 and Chrome 40.
Hope it helps someone.
EDIT
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).
Simply using e.g.:
$img.css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");
works too, and even seems to be faster by a few ms than using a proxy image.
Solution 3 - Javascript
Try this, I have got success response ..it's working
$("#divId").css("background-image", "url('data:image/png;base64," + base64String + "')");
Solution 4 - Javascript
Adding this trick to gabriel garcia's following solution -
var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(' + img + ')';
However, in my case this wasn't working. Moving url into the img variable did the trick. SO the final code looked like this
var img = "url('data:image/png;base64, "+base64Data + "')";
document.body.style.backgroundImage = img;
Solution 5 - Javascript
I tried this (and worked for me):
var img = 'data:image/png;base64, ...'; //place ur base64 encoded img here
document.body.style.backgroundImage = 'url(\'' + img + '\')';
ES6 syntax:
let img = 'data:image/png;base64, ...'
document.body.style.backgroundImage = `url('${img}')`
A bit better:
let setBackground = src => {
this.style.backgroundImage = `url('${src}')`
};
let node = nodeIGotFromDOM, img = imageBase64EncodedFromMyGF;
setBackground.call(node, img);
Solution 6 - Javascript
This is the correct way to make a pure call. No CSS.
<div style='background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC)repeat-x center;'></div>
Solution 7 - Javascript
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
url = "data:image;base64,"+data.replace(/(\r\n|\n|\r)/gm, "");
$("body").css("background-image", "url('" + url.replace(/(\r\n|\n|\r)/gm, "") + "')");
Solution 8 - Javascript
What I usually do, is to store the full string into a variable first, like so:
<?php
$img_id = 'data:image/png;base64,iVBORw0KGgoAAAAAAAAyCAY...';
?>
Then, where I want either JS to do something with that variable:
<script type="text/javascript">
document.getElementById("img_id").backgroundImage="url('<?php echo $img_id; ?>')";
</script>
You could reference the same variable via PHP directly using something like:
<img src="<?php echo $img_id; ?>">
Works for me ;)
Solution 9 - Javascript
Do not use quotes inside url
when using data URIs.
li {
background:
url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
no-repeat
left center;
padding: 5px 0 5px 25px;
}
Solution 10 - Javascript
In my case, it was just because I didn't set the height
and width
.
But there is another issue.
The background image could be removed using
element.style.backgroundImage=""
but couldn't be set using
element.style.backgroundImage="some base64 data"
Jquery works fine.