使用base64数据在javascript中设置背景图像答案

【问题标题】：Setting background image in javascript with base64 data使用base64数据在javascript中设置背景图像
【发布时间】：2015-01-04 06:04:19
【问题描述】：

我在使用数据 url 设置 div 的背景图像时遇到问题。这是我的代码，它不会抛出错误但也不起作用：

profilePhotoData= shout.get("authorProfPic");

src = 'data:image/png;base64, ' + profilePhotoData.base64

outerDiv.style.backgroundImage="url("+src+")";

【问题讨论】：

尝试删除base64,之后的字符串中的空格
不幸的是没有解决它
你试过了吗？ stackoverflow.com/questions/17090571/…
如果您的div 没有内容...因此没有大小...您不会看到它。添加空格或调整width 和height 将允许您看到背景图像。正如您在下面的评论中提到的，您可能需要缩放图像。通过为background-size 选项设置一个值。 Here is a run down

标签： javascript html image background-image

【解决方案1】：

我知道这个 css 有效：

body {
  background: #ffffff url("data:image/jpg;base64,/9j/4...") no-repeat top left;
}

因此也许你应该：

试试 background 属性。
在您的网址括号之间添加 "

【讨论】：

这在与 backgroundSize:cover 结合使用时有效
赞成；这确实很好用。但是，background-image 也很有效。 background 只是简写版本，这里允许您一次设置不重复和位置。检查MDN 以获取background 的简写。我的观点是，这种差异应该与它无关。另外，我从来不需要编码数据字符串的 url 括号之间的"。例如：check this css trick .. （当然链接"http.." 或"x.jpg" 需要它们）

【解决方案2】：

不确定你能做到这一点，你可以尝试用类来做到这一点。

看看Here

【讨论】：

【解决方案3】：

从base64字符串中删除换行符（\r\n），它应该可以工作。

【讨论】：