如何使用element.style.backgroundImage =“ url（filePath）”将背景图像添加到javascript？

Question

我希望将背景图像添加到我的Javascript HTML中：

var filePath = 'randomImage.png'; 
card.style.backgroundImage = "url(filePath)"

DOM结果：

div class="card" data-name="image" style="background-image: url("filePath");"

并且未显示实际图像。

我知道可以通过对url（'random-image.png'）进行硬编码来完成； 但这不是我想要的功能，因为filePath是动态的并且随时间变化。

Answer 1

因为filePath用引号引起来，所以它按字面意义放置，而不是从变量filePath中获取值。 您可以通过将变量添加到字符串上来解决此问题

card.style.backgroundImage = "url(" + filePath + ")";

或者，如果您喜欢这种语法，就这样。

card.style.backgroundImage = `url(${filePath})`;

希望这可以帮助！