Pengaturan gambar latar menggunakan properti jQuery CSS

379

Saya memiliki URL gambar dalam sebuah imageUrlvariabel dan saya mencoba mengaturnya sebagai gaya CSS, menggunakan jQuery:

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

Ini tampaknya tidak berfungsi, karena:

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

kembali none.

Ada ide, apa yang saya lakukan salah?

javascript jquery css

— Blankman
sumber

1

Apa sebenarnya masalahnya? Apakah Jquery membuat kesalahan?

— Mike_G

Tidak, ini tidak mengaturnya dengan benar. Saya mencatatnya dan itu tidak berubah.

— Blankman

2

Pertama kali jQuery tidak mencoba menebak apa yang dimaksud pengguna.

— gblazex

926

Anda mungkin menginginkan ini (menjadikannya seperti deklarasi gambar latar CSS normal):

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

— Greg
sumber

Saya melakukannya dengan cara ini - tetapi ruang antara 'url' dan tanda kurung kiri menyebabkan kode saya gagal. Salin / tempelkan milik Anda dan sadari masalahnya. Terima kasih!

— pmartin

Saya menggunakan kode Anda dalam skrip ini tetapi buat saya background-image: url ((tidak diketahui)); Ini skrip saya: var bg_img = jQuery ('. Wp-show-posts-inner'). Attr ('data-src'); jQuery ('. wp-show-posts-inner'). on ('mouseover', function () {jQuery ('. home-banner .bg'). css ('gambar latar belakang', 'url (' + bg_img + ')');}); Ada yang tahu kenapa?

— Gaston Coroleu

71

Anda akan ingin menyertakan tanda kutip ganda (") sebelum dan sesudah imageUrl seperti ini:

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

Dengan cara ini, jika gambar memiliki spasi, masih akan ditetapkan sebagai properti.

— Arosboro
sumber

6

dalam hal ini, seharusnya$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— Arosboro

4

Kutipan tidak diperlukan: stackoverflow.com/questions/2168855/cssurur-are-quotes-needed

— nullability

Ini menyelesaikannya untuk saya. Saya perlu memiliki tanda kutip ganda. Nama gambar saya memang mengandung spasi. Kalau tidak, tidak akan terjadi apa-apa. Saya bisa mendapatkan sesuatu seperti $('.myObject').css('background-color', 'green'); bekerja, tetapi tidak mengubah gambar tanpa tanda kutip ganda. Terima kasih!

— Ghost Echo

1

encodeURIComponenttidak akan berfungsi jika bagian dari URL Anda sudah berisi URL yang lolos dari karakter. Anda harus menghindari karakter tanda kutip ganda di imageUrl:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

— Nicolas Garnier

By the by, melakukan $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');memberi sayabackground-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

— Daerik

47

Atau dengan apa yang orang lain sarankan dengan benar, saya merasa lebih mudah biasanya untuk beralih kelas CSS, daripada pengaturan CSS individu (terutama URL gambar latar belakang). Sebagai contoh:

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

— Kon
sumber

2

Ini adalah cara yang jauh lebih baik untuk melakukan sesuatu karena memungkinkan Anda menggunakan prosesor pra css.

— calumbrodie

Ini bagus, jauh lebih baik daripada solusi yang lebih langsung.

— Magicode

Ini akan memuat kedua gambar.

— sheriffderek

Apakah ini sebenarnya solusi yang disarankan? Sepertinya ini tidak perlu memerlukan informasi lebih lanjut, misalnya jika ada kemungkinan gambar latar belakang ketiga, Anda harus menghapus semua gambar latar belakang lainnya, atau sebagai alternatif melacak gambar "saat ini". Dan juga memiliki detail konfigurasi, seperti ini URI dalam file .css membuatku gila. : smiley: Saya harus mencari di seluruh kode!

— Anne van Rossum

Menggunakan kelas-kelas seperti ini juga merupakan pilihan saya karena memungkinkan Anda menjaga pemisahan yang bersih antara kode dan gaya. Saya kemudian dapat mengubah semua gambar dan animasi saya di css (melalui pemilih media dan semacamnya) tanpa mengacaukan dengan kode. Anda tidak perlu mencari di seluruh kode jika gambar di luar kode!

— Evan Langlois

14

Ini kode saya:

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

Selamat menikmati, teman

— Apo
sumber

13

Lebih jauh ke jawaban lain, Anda juga dapat menggunakan "latar belakang". Ini sangat berguna ketika Anda ingin mengatur properti lain yang berkaitan dengan cara gambar digunakan oleh latar belakang, seperti:

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

— Matt Parkins
sumber

Jawaban ini lebih masuk akal ketika saya pikir op asli telah menggunakan background bukan background-image. Saya telah memodifikasi jawaban saya agar lebih masuk akal, dan saya akan meninggalkan ini untuk anak cucu.

— Matt Parkins

6

Bagi mereka yang menggunakan URL aktual dan bukan variabel:

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

— Berdebu
sumber

3

Coba ubah atribut "style":

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

— appcropolis
sumber

1

akan mengganti semua gaya lainnya. Tidak direkomendasikan

— melvin

2

Interpolasi string ke penyelamatan.

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

— Sushanth -
sumber

1

Masalah yang saya alami, adalah bahwa saya terus menambahkan titik koma ;di akhir url()nilai, yang mencegah kode dari bekerja.

BUKAN KODE KERJA:

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

KODE KERJA:

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

Perhatikan tanda titik dua yang dihapus ;di bagian akhir kode kerja. Saya hanya tidak tahu sintaks yang benar, dan sangat sulit untuk menyadarinya. Semoga ini bisa membantu orang lain di kapal yang sama.

— Prid
sumber

0

Jangan lupa bahwa fungsi jQuery css memungkinkan objek untuk dilewati yang memungkinkan Anda untuk mengatur beberapa item sekaligus. Kode yang dijawab akan terlihat seperti ini:

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

— Antony
sumber

-3

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

— wahaj
sumber

Ini tidak akan berfungsi karena url terbungkus dalam tanda kutip tunggal.

— Sal