Achtergrondafbeelding instellen met jQuery CSS-eigendom

Ik heb een afbeelding-URL in een imageUrlvariabele en ik probeer het in te stellen als CSS-stijl, met jQuery:

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

Dit lijkt niet te werken, zoals:

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

retourneert none.

Enig idee, wat ik verkeerd doe?

Antwoord 1, Autoriteit 100%

U wilt dit waarschijnlijk (om het te maken als een normale CSS-achtergrondverklaring):

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

Antwoord 2, Autoriteit 8%

U wilt dubbele aanhalingstekens (“) vóór en na de imageurl zoals deze opnemen:

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

Op deze manier, als het beeld ruimtes heeft, wordt het nog steeds ingesteld als een woning.

Antwoord 3, Autoriteit 5%

Als alternatief naar wat de anderen correct suggereren, vind ik het meestal gemakkelijker om CSS-klassen te schakelen, in plaats van individuele CSS-instellingen (vooral achtergrondafbeelding-URL’s). Bijvoorbeeld:

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

Antwoord 4, Autoriteit 2%

Hier is mijn code:

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

Veel plezier, vriend

Antwoord 5

Naast de andere antwoorden kunt u ook “achtergrond” gebruiken. Dit is met name handig als u andere eigenschappen wilt instellen die betrekking hebben op de manier waarop de afbeelding door de achtergrond wordt gebruikt, zoals:

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

Antwoord 6

Voor degenen die een echte URL gebruiken en geen variabele:

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

Antwoord 7

Het probleem dat ik had, is dat ik steeds een puntkomma ;toevoeg aan het einde van de url()waarde, waardoor de code niet werkte.

❌ WERKENDE CODE:

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

✅ WERKCODE:

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

Let op de weggelaten puntkomma ;aan het einde in de werkcode. Ik kende gewoon de juiste syntaxis niet, en het is echt moeilijk om het op te merken. Hopelijk helpt dit iemand anders in hetzelfde schuitje.

Antwoord 8

Probeer het kenmerk “style” te wijzigen:

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

Antwoord 9

String interpolatie om te redden.

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

Antwoord 10

Vergeet niet dat de jQuery CSS-functie objecten kunnen worden doorgegeven waarmee u meerdere items tegelijkertijd kunt instellen. De beantelde code ziet er dan als volgt uit:

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

Antwoord 11

$ ('myobject'). CSS ({'background-image': 'URL (imgurl)',});