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

Question

我正在尝试使用从数据库中获取的base64 BLOB更新背景图像。

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肯定包含二进制数据，由console.log()验证，但无论出于何种原因，这都不起作用！

Answer 1

您应该从传递给:函数的第一个参数background-image中删除多余的冒号[{1}}：

css()

而不是：

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

注意：首先尝试使用$(".profile-photo").css("background-image:","url(data:image/png;base64," + profilePhoto + ")"); _________________________________________^ 编码您的字符串：

btoa()

希望这有帮助。

Answer 2

如果您的profilePhoto变量获得正确的值。然后你的代码中只有一个错误。 1，您需要在背景图像后删除冒号（:)。并且还删除了profilePhoto变量左侧和右侧的空白区域。如下面的代码。

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