0

Here http://jsfiddle.net/m3e1kdzu/9/ is what i am trying

First div is html with data:image;base64

<div id="large_photo_null" style="width:50px; height:50px; 
background-image: url( data:image;base64,R0lGODlhR..  );" >
</div>

With html i see background image as expected.

Now trying to set background image for another div. But no changes. Can not set

Here is code

<div id="large_photo" style="width:100px; height:150px;" >
This is as if large photo where expect to change background
</div>

<div class="thbn_photo" style="width:100px; height:150px;" >
As if thumbnail photo. Click here.
</div>

Here jquery

$(document).on('click', '.thbn_photo', function(){
alert('thbn_photo clicked');

$('#large_photo').css( 'background-image: url( data:image;base64,R0lGODlhRgAzAJEAAMr..  );' );  

});

What is wrong? My code is incorrect or with jquery can not set data:image;base64?

Now found similar topic Is there a way to set background-image as a base64 encoded image in javascript?

Will check

2 Answers 2

3

After 2 hours of fiddling with this, this solution worked for me.

var img = new Image();
img.src = "data:image/jpeg;charset=utf-8;base64, " + profilepic;
$("#profilepict").css("background-image", "url('" + img.src + "')");
1

jQuery's .css() accepts arguments like so:

$('div').css({'background':'#000'});

try restructuring your last line there and see if you get different behavior.

2
  • With background':'#000 works. But how to use data:image;base64 instead of #000.... will try. Thanks for idea
    – Andris
    Feb 8, 2015 at 17:47
  • is this the expected behavior? I modified the last line of the jquery to match mine, also removed the ; at the end of the background url: jsfiddle.net/m3e1kdzu/12
    – Dpeif
    Feb 8, 2015 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.