Налаштування фонового зображення за допомогою властивості jQuery CSS

377

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

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

Здається, це не працює, оскільки:

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

повертає none.

Будь-яка ідея, що я роблю неправильно?

javascript jquery css

— Бланкмен
джерело

1

Яке саме питання? Jquery кидає помилку?

— Mike_G

Ні, це неправильно налаштовано. Я реєструю це, і він просто не змінюється.

— Бланкмен

2

Уперше jQuery не намагається вгадати, що мав на увазі користувач.

— gblazex

924

Ви, мабуть, цього хочете (щоб це було як звичайне оголошення CSS-фонового зображення):

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

— Грег
джерело

Я робив це так - але проміжок між 'URL-адресою' та лівими дужками спричинив збій мого коду. Скопіюйте / вставив своє та зрозумів проблему. Дякую!

— pmartin

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

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

71

Ви хочете включити подвійні лапки (") до та після зображенняUrl таким чином:

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

Таким чином, якщо на зображенні є пробіли, воно все одно буде встановлено як властивість.

— Аросборо
джерело

6

у такому випадку це повинно бути$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— Аросборо

4

Котирування не потрібні: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— допустимість порожніх

Це вирішило це для мене. Мені потрібно було мати подвійні цитати. Імена моїх зображень містять пробіли. Інакше нічого б не сталося. Я міг би отримати щось на кшталт $('.myObject').css('background-color', 'green'); роботи, але не міняти образ без подвійних лапок. Дякую!

— Ghost Echo

1

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");

— Мимохіть

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

— Кон
джерело

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");

— Метт Паркінс
джерело

Ця відповідь отримала більше сенсу, коли я подумав, що оригінальний оператор використовував фон, а не фонове зображення. Я змінив свою відповідь, щоб мати більше сенсу, і все одно залишу це для нащадків.

— Метт Паркінс

6

Для тих, хто використовує фактичну URL-адресу, а не змінну:

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

— Пил
джерело

3

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

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

— аппрополіс
джерело

1

замінить усі інші стилі. Не рекомендується

— Мельвін

2

Рядна інтерполяція на допомогу.

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

— Sushanth -
джерело

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 + ')'})

— Антоній
джерело

-3

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

— вахай
джерело

Це не спрацює, оскільки URL-адреса міститься в одних цитатах.

— Сал