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 + '")');

この方法では、画像にスペースがある場合でも、プロパティとして設定されます。

他の人が正しく示唆しているものの代わりに、個別のCSS設定（特に背景画像のURL）ではなく、通常はCSSクラスを切り替える方が簡単だと思います。例えば：

// 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を使用する場合：

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

"style"属性を変更してみてください：

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

救助への文字列補間。

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

私が抱えていた問題;は、url()値の最後にセミコロンを追加し続けたため、コードが機能しなくなったことです。

動作しないコード：

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

作業コード：

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

;作業コードの最後のセミコロンが省略されていることに注意してください。私は正しい構文を知らなかっただけで、それに気づくことは本当に難しいです。うまくいけば、これは同じボートの他の誰かを助けるでしょう。

jQuery css関数ではオブジェクトを渡すことができるため、複数の項目を同時に設定できることを忘れないでください。応答したコードは次のようになります。

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

$（ 'myObject'）。css（{'background-image'： 'url（imgUrl）'、}）;