Définition de l'image d'arrière-plan à l'aide de la propriété CSS jQuery

J'ai une URL d'image dans une imageUrlvariable et j'essaie de la définir comme style CSS, en utilisant jQuery:

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

Cela semble ne pas fonctionner, car:

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

retourne none.

Une idée, ce que je fais mal?

Vous voulez probablement cela (pour le faire comme une déclaration d'image d'arrière-plan CSS normale):

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

Vous voudrez inclure des guillemets doubles (") avant et après l'imageUrl comme ceci:

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

De cette façon, si l'image a des espaces, elle sera toujours définie comme une propriété.

Alternativement à ce que les autres suggèrent correctement, je trouve généralement plus facile de basculer les classes CSS, au lieu des paramètres CSS individuels (en particulier les URL des images d'arrière-plan). Par exemple:

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

Voici mon code:

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

Profitez-en, ami

En plus des autres réponses, vous pouvez également utiliser "background". Ceci est particulièrement utile lorsque vous souhaitez définir d'autres propriétés relatives à la façon dont l'image est utilisée par l'arrière-plan, telles que:

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

Pour ceux qui utilisent une URL réelle et non une variable:

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

Essayez de modifier l'attribut "style":

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

L'interpolation de cordes à la rescousse.

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

Le problème que je rencontrais, c'est que je continuais à ajouter un point-virgule ;à la fin de la url()valeur, ce qui empêchait le code de fonctionner.

CODE NON FONCTIONNANT:

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

CODE DE TRAVAIL:

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

Notez le point-virgule omis ;à la fin dans le code de travail. Je ne connaissais tout simplement pas la syntaxe correcte, et il est vraiment difficile de la remarquer. J'espère que cela aide quelqu'un d'autre dans le même bateau.

N'oubliez pas que la fonction jQuery css permet de passer des objets, ce qui vous permet de définir plusieurs éléments en même temps. Le code répondu ressemblerait alors à ceci:

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

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