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

380

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

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

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

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

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

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

javascript jquery css Бланкмэн
источник

1

В чем именно проблема? Jquery выдает ошибку?

Mike_G

Нет, это неправильно. Я регистрирую это, и это просто не изменяется.

Blankman

2

В первый раз jQuery не пытается угадать, что имел в виду пользователь.

gblazex

926

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

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

Greg
источник

Я делал это таким образом - но пробел между 'url' и левыми скобками вызывал сбой моего кода. Скопировал / вставил свой и понял проблему. Спасибо!

pmartin

Я использовал ваш код в этом скрипте, но получил фоновое изображение: url ((неизвестно)); Это мой скрипт: var bg_img = jQuery ('. Wp-show-posts-inner'). Attr ('data-src'); jQuery ('. wp-show-posts-inner'). on ('mouseover', function () {jQuery ('. home-banner .bg'). css ('background-image', 'url (' + bg_img) + ')');}); Есть идеи почему?

Гастон Королеу

URL (<ваш URL>) не работает для меня. Значение должно быть внутри кавычек, т.е. url ("<ваш URL>") или URL ("<ваш URL>").

ankur_rajput

71

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

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

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

Arosboro
источник

6

в таком случае это должно быть$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

Arosboro

4

Котировки не нужны: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

обнуляемость

Это решило это для меня. Мне нужно было двойные кавычки. Мои имена изображений содержат пробелы. Иначе ничего бы не произошло. Я мог бы заставить что-то вроде $('.myObject').css('background-color', 'green'); работать, но не менять изображение без двойных кавычек. Спасибо!

Призрачное эхо

1

encodeURIComponentне будет работать, если часть вашего URL уже содержит экранированные символы URL. Вы должны избежать потенциальной двойной кавычки в ImageUrl , хотя:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

Nicolas Garnier

Кстати, делать $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');дал мнеbackground-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

Daerik

47

В качестве альтернативы тому, что правильно предлагают другие, мне легче переключать классы 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');

Kon
источник

2

Это гораздо лучший способ сделать что-то, потому что он позволяет вам использовать предварительный процессор css.

Calumbrodie

Это здорово, намного лучше, чем более прямое решение.

Magicode

Это собирается загрузить оба изображения, хотя.

Шерифдерек

Это действительно рекомендуемое решение? Кажется, что это излишне требует дополнительной информации, например, если есть третье возможное фоновое изображение, вам нужно будет удалить все другие фоновые изображения или, в качестве альтернативы, отслеживать «текущее» изображение. А также наличие деталей конфигурации, таких как эти URI в файлах .css, сводит меня с ума. : smiley: Я должен искать по всему коду!

Анн ван Россум

Использование таких классов также является моим предпочтением, поскольку оно позволяет вам поддерживать четкое разделение между кодом и стилем. Затем я могу изменить все свои изображения и анимацию в css (с помощью селекторов мультимедиа и т. Д.), Не вмешиваясь в код. Вам не нужно искать по всему коду, если вы держите свои изображения вне кода!

Эван Ланглуа

14

Вот мой код:

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

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

Апо
источник

13

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

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

Мэтт Паркинс
источник

Этот ответ имел больше смысла, когда я подумал, что в оригинальной работе использовался фон, а не background-image. Я изменил свой ответ, чтобы придать ему больше смысла, и все равно оставлю его здесь для потомков.

Мэтт Паркинс

6

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

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

пыльный
источник

3

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

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

appcropolis
источник

1

заменит все другие стили. Не рекомендуется

Мелвин

2

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

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

Сушант -
источник

1

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

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

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

РАБОЧИЙ КОД:

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

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

ИУП
источник

0

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

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

Antony
источник

-3

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

wahaj
источник

Это не будет работать, потому что URL заключен в одинарные кавычки.

Сал

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

Ответы: