Как добавить фоновое изображение в JavaScript, используя element.style.backgroundImage = "url (filePath)"?

Question

Я хочу добавить фоновое изображение в мой HTML в Javascript:

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})`;

Надеюсь, это поможет!