Impostazione dell'immagine di sfondo utilizzando la proprietà CSS jQuery

379

Ho un URL di immagine in una imageUrlvariabile e sto provando a impostarlo come stile CSS, usando jQuery:

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

Questo sembra non funzionare, in quanto:

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

ritorna none.

Qualche idea, cosa sto facendo di sbagliato?

javascript jquery css

— Blankman
fonte

1

Qual è esattamente il problema? Jquery sta lanciando un errore?

— Mike_G,

No, non lo sta impostando correttamente. Lo sto registrando e non sta cambiando.

— Blankman,

2

La prima volta che jQuery non prova a indovinare il significato dell'utente.

— gblazex,

926

Probabilmente lo vuoi (per renderlo come una normale dichiarazione di immagine di sfondo CSS):

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

— Greg
fonte

Lo stavo facendo in questo modo - ma uno spazio tra 'url' e le parentesi sinistre stava causando il fallimento del mio codice. Copia / incolla il tuo e realizzato il problema. Grazie!

— pmartin

Sto usando il tuo codice in questo script ma mi procuro l'immagine di sfondo: url ((sconosciuto)); Questo è il mio script: 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 + ')');}); Qualche idea sul perché?

— Gaston Coroleu,

71

Ti consigliamo di includere virgolette doppie (") prima e dopo imageUrl in questo modo:

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

In questo modo, se l'immagine ha spazi, verrà comunque impostata come proprietà.

— Arosboro
fonte

6

in tal caso, dovrebbe essere$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— Arosboro

4

Le citazioni non sono necessarie: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— nullability

Questo mi ha risolto. Avevo bisogno di avere le doppie virgolette. I nomi delle mie immagini contengono spazi. Altrimenti, non accadrebbe nulla. Potrei far funzionare qualcosa di simile $('.myObject').css('background-color', 'green'); , ma non cambiare l'immagine senza virgolette doppie. Grazie!

— Ghost Echo,

1

encodeURIComponentnon funzionerà se parte del tuo URL conteneva già caratteri di escape URL. Dovresti sfuggire al potenziale personaggio con doppia virgoletta in imageUrl però:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

— Nicolas Garnier,

A $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

— proposito

47

In alternativa a ciò che gli altri suggeriscono correttamente, trovo di solito più facile alternare le classi CSS, invece delle singole impostazioni CSS (in particolare gli URL delle immagini di sfondo). Per esempio:

// 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
fonte

2

Questo è un modo molto migliore di fare le cose perché ti permette di usare un pre-processore css.

— Calumbrodie,

Questo è fantastico, molto meglio della soluzione più diretta.

— Magicode,

Questo caricherà entrambe le immagini però.

— Sheriffderek,

Questa è in realtà una soluzione raccomandata? Sembra che ciò richieda inutilmente ulteriori informazioni, ad esempio nel caso in cui sia presente una terza immagine di sfondo possibile, sarà necessario rimuovere tutte le altre immagini di sfondo o, in alternativa, tenere traccia dell'immagine "corrente". E anche avere dettagli di configurazione, come questi URI nei file .css, mi fa impazzire. : smiley: devo cercare in tutto il codice!

— Anne van Rossum,

L'uso di classi come questa è anche la mia preferenza poiché ti consente di mantenere una netta separazione tra codice e stile. Posso quindi cambiare tutte le mie immagini e animazioni nel CSS (tramite selettori multimediali e simili) senza fare confusione con il codice. Non è necessario cercare in tutto il codice se si mantengono le immagini fuori dal codice!

— Evan Langlois,

14

Ecco il mio codice:

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

Divertiti amico

— Apo
fonte

13

Oltre alle altre risposte, puoi anche usare "background". Ciò è particolarmente utile quando si desidera impostare altre proprietà relative al modo in cui l'immagine viene utilizzata dallo sfondo, come ad esempio:

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

— Matt Parkins
fonte

Questa risposta aveva più senso quando pensavo che l'op originale avesse usato uno sfondo non un'immagine di sfondo. Ho modificato la mia risposta per avere più senso e la lascerò comunque qui per i posteri.

— Matt Parkins,

6

Per coloro che utilizzano un URL reale e non una variabile:

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

— Polveroso
fonte

3

Prova a modificare l'attributo "stile":

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

— appcropolis
fonte

1

sostituirà tutti gli altri stili. Non raccomandato

— melvin,

2

Interpolazione di stringhe in soccorso.

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

— Sushanth -
fonte

1

Il problema che stavo riscontrando è che ho continuato ad aggiungere un punto e virgola ;alla fine del url()valore, impedendo al codice di funzionare.

CODICE NON FUNZIONANTE:

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

CODICE DI LAVORO:

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

Nota il punto e virgola omesso ;alla fine nel codice di lavoro. Semplicemente non conoscevo la sintassi corretta ed è davvero difficile accorgersene. Spero che questo aiuti qualcun altro nella stessa barca.

— PRID
fonte

0

Non dimenticare che la funzione CSS di jQuery consente il passaggio di oggetti che consente di impostare più elementi contemporaneamente. Il codice con risposta sarebbe quindi simile al seguente:

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

— Antony
fonte

-3

$ ('myObject'). css ({'background-image': 'url (imgUrl)',});

— Wahaj
fonte

Questo non funzionerà perché l'URL è racchiuso tra virgolette singole.

— Sal