用 blob 替换 div background-image - jQuery / CSS答案

【问题标题】：Replace div background-image with a blob - jQuery / CSS用 blob 替换 div background-image - jQuery / CSS
【发布时间】：2018-03-15 03:02:28
【问题描述】：

我正在尝试使用从数据库中获取的 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() 验证，但无论出于何种原因，这都不起作用！

【问题讨论】：

在 jQuery 代码中手动粘贴 blob 是否有效？
不，如果我只使用 url 而不是 blob、粘贴或其他方式，它就可以工作。

标签： javascript jquery html css blob

【解决方案1】：

您应该从传递给css() 函数的第一个参数background-image 中删除多余的冒号:：

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

而不是：

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

注意：首先尝试使用btoa() 对字符串进行编码：

var profilePhoto = btoa(data.profilePhoto);

希望这会有所帮助。

【讨论】：

抱歉，这是之前尝试让它工作时遗留下来的，以上似乎都不起作用。
好的，请与我们分享console.log("url(data:image/png;base64," + profilePhoto + ")");的输出...
/9j/4QOca ... 看起来不像 base64 编码数据
使用 base64 对图像数据进行编码，然后将字符串粘贴到您的 jQuery 表达式中
你是对的，看起来一个随机的在线“png to base64”编码器做了一些奇怪的事情！使用正确的 base64 图像再次尝试，它按预期工作，谢谢

【解决方案2】：

如果您的 profilePhoto 变量获得正确的值。那么您的代码中只有一个错误。首先，您需要在背景图像之后删除冒号 (:)。并删除 profilePhoto 变量左侧和右侧的空白。如下面的代码。

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

【讨论】：