如何使用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})`;

希望這可以幫助！