Ustawianie obrazu tła za pomocą właściwości jQuery CSS

377

Mam adres URL obrazu w imageUrlzmiennej i próbuję ustawić go jako styl CSS, używając jQuery:

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

To wydaje się nie działać, ponieważ:

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

zwraca none.

Masz pomysł, co robię źle?

javascript jquery css Blankman
źródło
1
Na czym dokładnie polega problem? Czy Jquery zgłasza błąd?
Mike_G
Nie, nie ustawia go poprawnie. Loguję to i to się nie zmienia.
Blankman
2
Po raz pierwszy jQuery nie próbuje zgadnąć, co miał na myśli użytkownik.
gblazex

Odpowiedzi:

924

Prawdopodobnie chcesz tego (aby wyglądało to jak zwykła deklaracja obrazu tła CSS):

$('myObject').css('background-image', 'url(' + imageUrl + ')');
Greg
źródło
Robiłem to w ten sposób - ale spacja między „url” a lewymi nawiasami powodowała awarię mojego kodu. Skopiuj / wklej swój i zrozumiałeś problem. Dzięki!
pmartin
Używam twojego kodu w tym skrypcie, ale dostaj mi obraz w tle: url ((nieznany)); To jest mój skrypt: 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 + ')');}); Masz pomysł, dlaczego?
Gaston Coroleu
71

Będziesz chciał zawrzeć podwójne cudzysłowy („) przed i za imageUrl w następujący sposób:

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

W ten sposób, jeśli obraz ma spacje, nadal będzie ustawiony jako właściwość.

Arosboro
źródło
6
w takim przypadku powinno być$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');
Arosboro
4
Cytaty nie są konieczne: stackoverflow.com/questions/2168855/css-url-are-quotes-needed
nullability
To rozwiązało dla mnie. Musiałem mieć podwójne cytaty. Moje nazwy obrazów zawierają spacje. W przeciwnym razie nic by się nie wydarzyło. Mógłbym dostać coś jak $('.myObject').css('background-color', 'green'); do pracy, ale nie mogłem zmienić obrazu bez podwójnych cudzysłowów. Dzięki!
Ghost Echo,
1
encodeURIComponentnie będzie działać, jeśli część adresu URL zawierała już znaki zmiany znaczenia adresu URL. Powinieneś jednak uniknąć potencjalnej podwójnej cudzysłowy w imageUrl:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');
Nicolas Garnier
Nawiasem $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");
mówiąc, dawanie
47

Alternatywnie do tego, co inni sugerują poprawnie, łatwiej jest mi zwykle przełączać klasy CSS, zamiast indywidualnych ustawień CSS (zwłaszcza adresów URL obrazów tła). Na przykład:

// 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
źródło
2
Jest to znacznie lepszy sposób na robienie rzeczy, ponieważ pozwala na użycie procesora wstępnego css.
calumbrodie
To świetne, znacznie lepsze niż bardziej bezpośrednie rozwiązanie.
Magicode,
Spowoduje to jednak załadowanie obu obrazów.
szeryf
Czy to rzeczywiście zalecane rozwiązanie? Wygląda na to, że niepotrzebnie wymaga to więcej informacji, np. W przypadku trzeciego obrazu tła należy usunąć wszystkie inne obrazy tła lub alternatywnie śledzić „bieżący” obraz. A także posiadanie szczegółów konfiguracji, takich jak te identyfikatory URI w plikach .css, doprowadza mnie do szału. : smiley: Muszę przeszukać cały kod!
Anne van Rossum
Używanie takich klas jest również moim wyborem, ponieważ pozwala zachować czystą separację między kodem a stylem. Następnie mogę zmienić wszystkie moje obrazy i animacje w css (za pomocą selektorów multimediów itp.) Bez bałagania się kodem. Nie musisz szukać całego kodu, jeśli trzymasz swoje obrazy poza kodem!
Evan Langlois,
14

Oto mój kod:

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

Ciesz się, przyjacielu

Apo
źródło
13

Oprócz innych odpowiedzi możesz także użyć „tła”. Jest to szczególnie przydatne, gdy chcesz ustawić inne właściwości związane ze sposobem użycia obrazu w tle, takie jak:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");
Matt Parkins
źródło
Ta odpowiedź była bardziej sensowna, gdy myślałem, że w oryginalnym op operatorze było tło, a nie tło. Zmodyfikowałem swoją odpowiedź, aby była bardziej sensowna, i tak zostawię ją tutaj dla potomności.
Matt Parkins
6

Dla tych, którzy używają rzeczywistego adresu URL, a nie zmiennej:

$('myObject').css('background-image', 'url(../../example/url.html)');
Zakurzony
źródło
3

Spróbuj zmodyfikować atrybut „style”:

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');
appcropolis
źródło
1
zastąpi wszystkie inne style. Niezalecane
melvin
2

Interpolacja łańcuchów na ratunek.

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);
Sushanth -
źródło
1

Problemem było to, że dodawałem średnik ;na końcu url()wartości, co uniemożliwiało działanie kodu.

KOD NIE DZIAŁA:

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

KOD PRACY:

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

Zwróć uwagę na opuszczony średnik ;na końcu w działającym kodzie. Po prostu nie znałem poprawnej składni i naprawdę trudno to zauważyć. Mam nadzieję, że pomoże to komuś innemu na tej samej łodzi.

Prid
źródło
0

Nie zapominaj, że funkcja css jQuery pozwala na przekazywanie obiektów, co pozwala ustawić wiele elementów jednocześnie. Kod odpowiedzi będzie wyglądał następująco:

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

Antony
źródło
-3 
$ ('myObject'). css ({'background-image': 'url (imgUrl)',});
wahaj
źródło
To nie zadziała, ponieważ adres URL jest ujęty w pojedyncze cudzysłowy.
Sal