web-dev-qa-db-fra.com

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 variable imageUrl et j'essaie de la définir comme style CSS à l'aide de jQuery:

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

Cela semble ne pas fonctionner, car:

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

renvoie none.

Une idée, qu'est-ce que je fais mal?

javascriptjquerycss
358
Blankman

Vous voulez probablement ceci (pour qu’il ressemble à une déclaration d’image d’arrière-plan CSS normale):

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

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

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

Ainsi, si l'image contient des espaces, elle sera toujours définie comme propriété.

67
Arosboro

En guise d'alternative à ce que les autres suggèrent correctement, il est généralement plus facile de basculer les classes CSS au lieu de définir des paramètres CSS individuels (en particulier les URL d'image de fond). 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');
46
Kon

Voici mon code:

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

Profitez, mon ami

15
Apo

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

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

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

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

Essayez de modifier l'attribut "style":

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

Interpolation de chaînes à la rescousse.

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

Le problème que j’avais, c’est que j’ajoutais un point-virgule ; à la fin de la valeur url(), ce qui empêchait le code de fonctionner.

PAS DE CODE DE TRAVAIL: 

$('#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 du code de travail. Je ne connaissais tout simplement pas la syntaxe correcte, et il est vraiment difficile de la remarquer. Espérons que cela aide quelqu'un d'autre dans le même bateau.

0
Prid