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

Question

I wish to add a background image into my HTML in Javascript:

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

The DOM result:

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

And the actual image is not shown.

I know that it can be done by hard-coding url('random-image.png'); but this is not the functionality that I want because filePath is dynamic and changes over time.

Answer 1

Because filePath is in quotations it's put in literally instead of getting the value from the variable filePath. You can get around this by adding the variable onto the string like this

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

or if you prefer this syntax, like this.

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

Hope this helps!