使用jQuery CSS属性设置background-image出错

在ImageUrl变量中有一个图像URL，我试图使用jQuery将其设置为CSS样式：

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

这似乎不起作用，因为：

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

返回了这个结果： none

我哪里做错了吗？

You probably want this (to make it like a normal CSS background-image declaration):

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

You'll want to include double quotes (") before and after the imageUrl like this:

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

This way, if the image has spaces it will still be set as a property.

Here is my code:

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

Enjoy, friend

Alternatively to what the others are correctly suggesting, I find it easier usually to toggle CSS classes, instead of individual CSS settings (especially background image URLs). For example:

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

Further to the other answers, you can also use "background". This is particularly useful when you want to set other properties relating to the way the image is used by the background, such as:

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

For those using an actual URL and not a variable:

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

String interpolation to the rescue.

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

Try modifying the "style" attribute:

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

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

The problem I was having, is that I kept adding a semi-colon ; at the end of the url() value, which prevented the code from working.

NOT WORKING CODE:

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

WORKING CODE:

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

Notice the omitted semi-colon ; at the end in the working code. I simply didn't know the correct syntax, and it's really hard to notice it. Hopefully this helps someone else in the same boat.