Mam URL obrazu w imageUrl zmienna i próbuję ustawić go jako stylu CSS, przy użyciu jQuery:Ustawienie tła obrazu za pomocą właściwości jQuery CSS
$('myObject').css('background-image', imageUrl);
To wydaje się być nie działa, jak:
console.log($('myObject').css('background-image'));
zwraca none.
Każdy pomysł, co robię źle?
Prawdopodobnie chcesz to (aby uczynić go jak normalny deklaracji CSS background-image):
$('myOjbect').css('background-image', 'url(' + imageUrl + ')');
Robiłem to w ten sposób - ale spacja między "url" a lewymi nawiasami powodowała błąd mojego kodu. Skopiuj/wklej swoje i zrealizuj problem. Dzięki! – pmartin
Będziesz chcesz dołączyć cudzysłów (") przed i po tym imageURL tak:
$('myOjbect').css('background-image', 'url("' + imageUrl + '")');
w ten sposób, jeśli obraz zawiera spacje to nadal będzie ustawiony jako właściwość
Adresy URL nie mogą zawierać spacji. Spacje muszą być zakodowane. –
w takim przypadku powinien to być '$ (" myObject "). Css (" obraz w tle "," adres url ("+ encodeURIComponent (imageUrl) +") ");' – Arosboro
Cytaty nie są konieczne: http: // stackoverflow.com/questions/2168855/css-url-are-quotes-eded – nullability
Oto mój kod.
$('body').css('background-image', 'url("/apo/1.jpg")');
Enjoy, przyjaciel
Alternatywnie do tego, co inni są prawidłowo sugerując, że łatwiej zwykle do przełączania klas CSS, zamiast indywidualnych ustawień CSS (zwłaszcza adresów URL tło obrazu). 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');
To jest o wiele lepszy sposób robienia rzeczy, ponieważ pozwala ci użyć procesora css. – calumbrodie
To jest świetne, znacznie lepsze niż bardziej bezpośrednie rozwiązanie. – Magicode
To jednak spowoduje załadowanie obu obrazów. – sheriffderek
Oprócz innych odpowiedzi, możesz również użyć "tła". Jest to szczególnie przydatne, gdy chcesz ustawić inne właściwości odnoszące się do sposobu, w jaki obraz jest używany przez tle, takie jak:
$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");
Ta odpowiedź nabrała większego sensu, gdy pomyślałem, że oryginalny op użył tła, a nie tła. Zmieniłem moją odpowiedź, aby nadać więcej sensu, a ja zostawię to tutaj dla potomności. –
To nie działa teraz. – Ionut
dla osób korzystających rzeczywisty adres URL, a nie zmiennej:
$('myObject').css('background-image', 'url(../../example/url.html)');
Interpolacja z ciągami na ratunek.
let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);
Spróbuj modyfikację atrybutu "style":
$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');
$('myObject').css({'background-image': 'url(imgUrl)',});
To nie zadziała, ponieważ adres URL jest zawarty w pojedynczych cudzysłowach. – Sal
Czym dokładnie jest problem? Czy Jquery rzuca błąd? –
Nie, nie jest ustawiony prawidłowo. Loguję się i to się nie zmienia. – Blankman
Po raz pierwszy jQuery nie próbuje odgadnąć, co użytkownik ma na myśli. – galambalazs