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

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