javascript - 返回图像作为元素的背景

我有一个创建图像的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);

我该如何进行这项工作？

最佳答案

 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>