Einstellen des Hintergrundbildes mit der CSS-Eigenschaft jQuery

Question

Ich habe eine Bild-URL in einer imageUrl Variable und ich versuche, es als CSS-Stil, mit jQuery zu setzen:

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

Dies scheint nicht zu funktionieren, da:

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

gibt zurück. none .

Irgendeine Idee, was ich falsch mache?

Answer 1

Das Problem, das ich hatte, war, dass ich immer wieder ein Semikolon einfügte ; am Ende der url() Wert, wodurch der Code nicht funktionierte.

NICHT FUNKTIONIERENDER CODE:

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

ARBEITSCODE:

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

Beachten Sie das fehlende Semikolon ; am Ende im Arbeitscode. Ich kannte einfach nicht die richtige Syntax, und es ist wirklich schwer, das zu bemerken. Hoffentlich hilft das jemandem, der im selben Boot sitzt.

Answer 2

Für diejenigen, die eine tatsächliche URL und nicht eine Variable verwenden:

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

Answer 3

Versuchen Sie, das Attribut "style" zu ändern:

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

Answer 4

Vergessen Sie nicht, dass die jQuery css-Funktion die Übergabe von Objekten erlaubt, so dass Sie mehrere Elemente gleichzeitig festlegen können. Der beantwortete Code würde dann wie folgt aussehen:

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

Answer 5

Die Interpolation von Zeichenketten ist die Rettung.

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