使用 jQuery CSS 属性设置背景图像
我在 imageUrl 变量中有一个图像 URL，我正在尝试使用 jQuery 将其设置为 CSS 样式：
$('myObject').css('background-image', imageUrl);
这似乎不起作用，因为：
console.log($('myObject').css('background-image'));
返回 none。
任何想法，我做错了什么？
你可能想要这个（让它像一个普通的 CSS 背景图像声明）：
$('myObject').css('background-image', 'url(' + imageUrl + ')');
您需要在 imageUrl 之前和之后包含双引号 (")，如下所示：
$('myOjbect').css('background-image', 'url("' + imageUrl + '")');
这样，如果图像有空格，它仍然会被设置为属性。
$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');
$('.myObject').css('background-color', 'green'); 之类的东西工作，但不能在没有双引号的情况下更改图像。谢谢！
encodeURIComponent 将不起作用。不过，您应该在 imageUrl 中转义潜在的双引号字符：$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');
$('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');给了我background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");
除了其他人正确建议的内容之外，我发现切换 CSS 类而不是单独的 CSS 设置（尤其是背景图像 URL）通常更容易。例如：
// 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');
这是我的代码：
$('body').css('background-image', 'url("/apo/1.jpg")');
享受吧，朋友
除了其他答案，您还可以使用“背景”。当您要设置与背景使用图像的方式相关的其他属性时，这特别有用，例如：
$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");
我遇到的问题是，我一直在 url() 值的末尾添加一个分号 ;，这导致代码无法工作。
❌ 不工作代码：
$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');
//--------------------------------------------------------------------------^✅ 工作代码：
$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');
请注意工作代码末尾省略的分号 ;。我只是不知道正确的语法，而且很难注意到它。希望这可以帮助同一条船上的其他人。
对于那些使用实际 URL 而不是变量的人：
$('myObject').css('background-image', 'url(../../example/url.html)');
尝试修改“样式”属性：
$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');
字符串插值救援。
let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);
不要忘记 jQuery css 函数允许传递对象，这允许您同时设置多个项目。回答的代码将如下所示：
$(this).css({'background-image':'url(' + imageUrl + ')'})
.css( {...} )
$('myObject').css({'background-image': 'url(imgUrl)',});
