Đặt ảnh nền bằng thuộc tính CSS jQuery

Tôi có một URL hình ảnh trong một imageUrlbiến và tôi đang cố gắng đặt nó theo kiểu CSS, sử dụng jQuery:

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

Điều này dường như không hoạt động, như:

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

trả lại none.

Bất cứ ý tưởng, những gì tôi đang làm sai?

Bạn có thể muốn điều này (để làm cho nó giống như một khai báo hình nền CSS bình thường):

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

Bạn sẽ muốn bao gồm dấu ngoặc kép (") trước và sau imageUrl như thế này:

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

Bằng cách này, nếu hình ảnh có khoảng trắng, nó vẫn sẽ được đặt làm thuộc tính.

Ngoài ra, với những gì người khác đang đề xuất chính xác, tôi thấy việc chuyển đổi các lớp CSS dễ dàng hơn, thay vì các cài đặt CSS riêng lẻ (đặc biệt là các URL hình ảnh nền). Ví dụ:

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

Đây là mã của tôi:

$ ('body'). css ('hình nền', 'url ("/ apo / 1.jpg")');

Thưởng thức, bạn

Ngoài ra với các câu trả lời khác, bạn cũng có thể sử dụng "nền". Điều này đặc biệt hữu ích khi bạn muốn đặt các thuộc tính khác liên quan đến cách hình ảnh được sử dụng bởi nền, chẳng hạn như:

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

Đối với những người sử dụng URL thực tế và không phải là một biến:

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

Hãy thử sửa đổi thuộc tính "style":

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

Nội suy chuỗi để giải cứu.

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

Vấn đề tôi gặp phải là tôi tiếp tục thêm dấu chấm phẩy ;ở cuối url()giá trị, điều này ngăn mã hoạt động.

MÃ KHÔNG LÀM VIỆC:

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

MÃ LÀM VIỆC:

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

Lưu ý dấu chấm phẩy bị bỏ qua ;ở cuối mã làm việc. Tôi chỉ đơn giản là không biết cú pháp chính xác, và thật khó để nhận ra nó. Hy vọng điều này sẽ giúp người khác trong cùng một chiếc thuyền.

Đừng quên rằng hàm css jQuery cho phép các đối tượng được thông qua cho phép bạn đặt nhiều mục cùng một lúc. Mã được trả lời sẽ trông như thế này:

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

$ ('myObject'). css ({'hình nền': 'url (imgUrl)',});