Настройка фонового изображения с использованием свойства CSS jQuery

У меня есть URL-адрес изображения в переменной imageUrl, и я пытаюсь установить его как стиль CSS, используя jQuery:

$('myObject').css('background-image', imageUrl);

Кажется, что это не работает, поскольку:

console.log($('myObject').css('background-image'));

возвращает none.

Любая идея, что я делаю неправильно?

ОТВЕТЫ

Ответ 1

Вы, вероятно, хотите это (чтобы сделать это как обычное объявление CSS background-image):

$('myObject').css('background-image', 'url(' + imageUrl + ')');

Ответ 2

Вы хотите включить двойные кавычки (") до и после imageUrl следующим образом:

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

Таким образом, если изображение имеет пробелы, оно все равно будет установлено как свойство.

Ответ 3

В качестве альтернативы тому, что другие правильно предлагают, проще всего переключать классы CSS, а не отдельные настройки CSS (особенно URL-адреса фоновых изображений). Например:

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

Ответ 4

Вот мой код:

$('body').css('background-image', 'url("/apo/1.jpg")');

Наслаждайтесь, друг

Ответ 5

В дополнение к другим ответам вы также можете использовать "фон". Это особенно полезно, если вы хотите установить другие свойства, относящиеся к способу использования изображения фоном, например:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");

Ответ 6

Для тех, кто использует реальный URL, а не переменную:

$('myObject').css('background-image', 'url(../../example/url.html)');

Ответ 7

Попробуйте изменить атрибут "style":

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

Ответ 8

Строковая интерполяция на помощь.

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);

Ответ 9

Работайте для меня

$('myOjbect').css('background-image', 'url(' + imageUrl + ')');

Ответ 10

Проблема у меня была в том, что я продолжал добавлять точку с запятой ; в конце значения url(), которое препятствовало работе кода.

НЕ РАБОЧИЙ КОД:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');

РАБОЧИЙ КОД:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');

Обратите внимание на пропущенную точку с запятой ; в конце в рабочем коде. Я просто не знал правильный синтаксис, и это действительно трудно заметить. Надеюсь, это поможет кому-то еще в той же лодке.

Ответ 11

Не забывайте, что функция jQuery css позволяет передавать объекты, что позволяет вам устанавливать несколько элементов одновременно. Код ответа будет выглядеть следующим образом:

$(this).css({'background-image':'url(' + imageUrl + ')'})

Ответ 12

$('myObject').css({'background-image': 'url(imgUrl)',});