Check out what I'm working on here
The first div contains html with data:image;base64
<div id="large_photo_null" style="width:50px; height:50px;
background-image: url( data:image;base64,R0lGODlhR.. );" >
</div>
When using html, the background image displays as expected.
Now, I am attempting to set a background image for another div. However, no changes are being made.
Here is the code:
<div id="large_photo" style="width:100px; height:150px;" >
This is meant to be a large photo where I expect to change the background.
</div>
<div class="thbn_photo" style="width:100px; height:150px;" >
This is like a thumbnail photo. Click here.
</div>
Here is the jQuery code:
$(document).on('click', '.thbn_photo', function(){
alert('thbn_photo clicked');
$('#large_photo').css( 'background-image: url( data:image;base64,R0lGODlhRgAzAJEAAMr.. );' );
});
What could be going wrong? Is my code incorrect or is it not possible to set data:image;base64 using jQuery?
I found a similar topic that might help: Is there a way to set background-image as a base64 encoded image in javascript?
I will look into this further.