用Blob替换div背景图像-jQuery / CSS

Question

I am trying to update a background image with a base64 BLOB taken from a database.

HTML:

<div valign="bottom" class="profile-photo card-header color-white no-border"></div>

jQuery:

var profilePhoto = data.profilePhoto;

$(".profile-photo").css("background-image","url(data:image/png;base64," + profilePhoto + ")");

profilePhoto definitely contains the binary data, verifed by a console.log() , but for whatever reason this is not working!

Answer 1

You should remove the extra colon sign : from the first parameter background-image passed to css() function :

$(".profile-photo").css("background-image","url(data:image/png;base64," + profilePhoto + ")");

Instead of :

$(".profile-photo").css("background-image:","url(data:image/png;base64," + profilePhoto + ")");
_________________________________________^

NOTE : Try to encode your string first using btoa() :

var profilePhoto = btoa(data.profilePhoto);

Hope this helps.

Answer 2

if your profilePhoto variable getting correct value. then only one mistake in your code. 1st you need to remove colon (:) after the background-image. and also removing the white space in profilePhoto variable left and right side.like below code.

$(".profile-photo").css("background-image","url(data:image/png;base64,"+profilePhoto+")");