Base64背景-图像不显示
Base64背景-图像不显示
提问于 2022-03-24 21:00:48
我试图动态地将div的背景设置为base64图像。base64映像本身存储在一个字符串变量base64Image中。我正在使用下面的代码行。
$("#loadingAdImage").css("background-image", `url("${base64Image}")`);当我检查div元素时，我发现即使执行了行，div也没有样式属性。我甚至试过以下几种方法。
$("#loadingAdImage").attr("style", `background-image: url('${base64Image}')`);这一次，当我检查div元素时，我得到了样式属性，但是图像本身并没有显示在背景中。有人知道怎么回事吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2022-03-27 21:11:51
这应该是可行的，它将图像显示为加载:-
HTML
<div id="test">JS
var pic = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfMAAAHyCAMAAADIj";
// the pic data should be a lot bigger, change it to whatever data you have //
var img = new Image();
img.src = pic;
$("#test").css("background-image", "url('" + img.src + "')");Stack Overflow用户
发布于 2022-03-24 22:06:50
使用img标记表示#loadingAdImage
然后使用以下代码
$("#loadingAdImage").attr("src", "data:image/png;base64, "+base64Image);Stack Overflow用户
发布于 2022-03-25 01:58:33
我能想到发生这种情况的唯一方法是base64Image包含一个"字符。
如果给出代码，任何其他值都会正确地设置属性：
const sources = [
"foo bar'¨^*-0+:.?/#`", // many "special" characters but no double quote
"foo \"bar" // contains a double quote
];
const test = (index) => {
const source = sources[index];
console.log(
{ source,
result: $("#test" + index).css("background-image", `url("${source}")`)
.attr("style")
}
);
};
test(0);
test(1);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test0"></div>
<div id="test1"></div>
因此，再次检查您的base64Image值，并删除其中的任何"，它不是base64编码字符的一部分，在base64编码的数据: URL中没有任何作用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71609368
复制相关文章
相似问题
腾讯云开发者
