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

Community
  • 1
  • 1
Andris
  • 1,434
  • 1
  • 19
  • 34

2 Answers2

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 + "')");
user2841639
  • 91
  • 8
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.

Dpeif
  • 532
  • 1
  • 6
  • 18
  • With `background':'#000` works. But how to use `data:image;base64` instead of `#000`.... will try. Thanks for idea – Andris Feb 08 '15 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: http://jsfiddle.net/m3e1kdzu/12/ – Dpeif Feb 08 '15 at 17:58