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

Question

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

315

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

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

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

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

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

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

Blankman 04 фев. 2009, в 16:13

Источник

1

В чем именно заключается проблема? Jquery выдает ошибку?
Mike_G 04 фев. 2009, в 16:14
0

Нет, это не правильно. Я регистрирую это, и это только не изменяется.
Blankman 04 фев. 2009, в 16:16
2

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

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

10 ответов

59

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

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

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

Arosboro 10 март 2011, в 18:23

2

В URL не должно быть пробелов. Пробелы должны быть закодированы.
Jake Wilson 28 фев. 2013, в 22:26
6

в этом случае это должно быть $('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');
Arosboro 02 март 2013, в 03:58
4

Котировки не нужны: stackoverflow.com/questions/2168855/css-url-are-quotes-needed
nullability 15 март 2013, в 19:13
0

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

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

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

Показать ещё 4 комментария

39

В качестве альтернативы тому, что другие правильно предлагают, проще всего переключать классы 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 02 июль 2011, в 19:38

2

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

Это здорово, намного лучше, чем более прямое решение.
Magicode 07 июнь 2013, в 14:34
0

Это собирается загрузить оба изображения, хотя.
sheriffderek 07 апр. 2014, в 17:30
0

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

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

@sheriffderek: я так не думаю. Он применяет только один класс за один раз к элементу
Kunal 04 янв. 2019, в 16:11

Показать ещё 4 комментария

15

Вот мой код:

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

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

Apo 02 июль 2011, в 18:12

11

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

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

Matt Parkins 27 фев. 2013, в 15:55

0

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

Это не работает сейчас.
Ionut 22 сен. 2016, в 11:12

5

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

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

Dusty 01 окт. 2013, в 01:02

1

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

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

Sushanth -- 18 фев. 2017, в 01:56

0

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

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

appcropolis 29 май 2017, в 02:55

0

заменит все другие стили. Не рекомендуется
melvin 23 март 2018, в 12:51

0

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

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

ofir_aghai 20 окт. 2015, в 10:18

-1

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

wahaj 03 авг. 2017, в 00:19

0

Это не будет работать, потому что URL заключен в одинарные кавычки.
Sal 02 авг. 2017, в 23:43

Ещё вопросы

В чем именно заключается проблема? Jquery выдает ошибку?
Нет, это не правильно. Я регистрирую это, и это только не изменяется.
В первый раз jQuery не пытается угадать, что имел в виду пользователь.
В URL не должно быть пробелов. Пробелы должны быть закодированы.
в этом случае это должно быть $('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');
Котировки не нужны: stackoverflow.com/questions/2168855/css-url-are-quotes-needed
Это решило это для меня. Мне нужно было двойные кавычки. Мои имена изображений содержат пробелы. Иначе ничего бы не произошло. Я мог бы получить что-то вроде $('.myObject').css('background-color', 'green'); работать, но не менять изображение без двойных кавычек. Спасибо!
encodeURIComponent не будет работать, если часть вашего URL уже содержит экранированные символы URL. Вам следует избегать использования символа двойной кавычки в imageUrl: $('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');
Кстати, делая $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')'); дал мне background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");
Это намного лучший способ сделать что-то, потому что он позволяет вам использовать предварительный процессор css.
Это здорово, намного лучше, чем более прямое решение.
Это собирается загрузить оба изображения, хотя.
Это действительно рекомендуемое решение? Кажется, что это излишне требует дополнительной информации, например, если есть третье возможное фоновое изображение, вам нужно будет удалить все другие фоновые изображения или, в качестве альтернативы, отследить «текущее» изображение. А также наличие деталей конфигурации, таких как эти URI в файлах .css, сводит меня с ума. : smiley: Я должен искать по всему коду!
Использование таких классов также является моим предпочтением, поскольку оно позволяет вам поддерживать четкое разделение между кодом и стилем. Затем я могу изменить все свои изображения и анимацию в css (с помощью селекторов мультимедиа и т. Д.), Не вмешиваясь в код. Вам не нужно искать по всему коду, если вы держите свои изображения вне кода!
@sheriffderek: я так не думаю. Он применяет только один класс за один раз к элементу
Этот ответ имел больше смысла, когда я подумал, что в оригинальной статье использовался фон, а не background-image. Я изменил свой ответ, чтобы придать ему больше смысла, и все равно оставлю его здесь для потомков.
заменит все другие стили. Не рекомендуется
Это не будет работать, потому что URL заключен в одинарные кавычки.

Greg · Accepted Answer · 2009-02-04T17-46-00.000Z

Вероятно, вы хотите это сделать (чтобы сделать его похожим на обычное декларацию фонового изображения CSS):

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

Я делал это таким образом - но пробел между 'url' и левыми скобками вызывал сбой моего кода. Скопировал / вставил свой и понял проблему. Спасибо!
Я использую ваш код в этом скрипте, но получаю фоновое изображение: 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) + ')');}); Есть идеи почему?