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

Question

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

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

Это, кажется, не работает, как:

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

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

Есть идеи, что я делаю не так?

Answer 1

Вы, вероятно, хотите это (чтобы это было похоже на обычное объявление CSS-фона):

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

Answer 2

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

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

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

Answer 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');

Answer 4

Вот мой код:

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

Наслаждайся, друг

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

Строковая интерполяция для спасения.

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

Answer 9

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