Question

我有一个用于创建图像的JavaScript函数：

    var imageFoo = document.createElement("img");
    imageFoo.src = dataUrl;
    imageFoo.classList.add("waveform");
    imageFoo.id = "wvf";

现在，如果我添加：

document.body.appendChild(imageFoo);

将图像返回到页面正文。一切正常。但我尝试做的是将此图像作为元素的背景返回。我尝试了以下方法：

var x = document.getElementsByClassName("mejs-time-total");
x[0].style.backgroundImage = dataUrl; //I tried with imageFoo.src too

它不会加载图像。

如果我将其链接到我的磁盘上的其中一个图像，它将加载图像：

x[0].style.backgroundImage = "url(https://localhost:44384/Content/images/waveform.png);

我该如何做到这一点？

Answer 1

 var imageFoo = document.createElement("img");
    imageFoo.src = "https://via.placeholder.com/350x150?text=1-3";
    imageFoo.classList.add("waveform");
    imageFoo.id = "wvf";

var x = document.getElementsByClassName("data");
x[0].style.backgroundImage = "url("+imageFoo.src+")"

<div class="data">
  sample
</div>

将图像作为元素的背景返回

1 个答案: