JQuery CSS özelliğini kullanarak arka plan resmini ayarlama

378

imageUrlDeğişken bir resim URL'si var ve jQuery kullanarak, CSS stili olarak ayarlamaya çalışıyorum:

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

Bu çalışmıyor gibi görünüyor:

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

döner none.

Herhangi bir fikrim var, ne yanlış yapıyorum?

javascript jquery css

— Blankman
kaynak

1

Sorun tam olarak nedir? Jquery hata veriyor mu?

— Mike_G

Hayır, düzgün ayarlanmamış. Günlüğe kaydediyorum ve sadece değişmiyor.

— Blankman

2

JQuery ilk defa kullanıcının ne anlama geldiğini tahmin etmeye çalışmaz.

— gblazex

925

Muhtemelen bunu istiyorsunuz (normal bir CSS arka plan resmi bildirimi gibi yapmak için):

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

— Greg
kaynak

Bunu bu şekilde yapıyordum - ama 'url' ve sol parantezler arasındaki boşluk kodumun başarısız olmasına neden oluyordu. Sizinkini kopyalayın / yapıştırın ve sorunu fark etti. Teşekkürler!

— Mart

Bu kodda kodunuzu kullanarak ama bana arka plan resmi olsun: url ((bilinmiyor)); Bu benim betiğim: var bg_img = jQuery ('. Wp-show-posts-inner'). Attr ('data-src'); jQuery ('. wp-show-posts-inner'). on ('fareyle üzerine gelme', işlev () {jQuery ('. home-banner .bg'). css ('arka plan resmi', 'url (' + bg_img + ')');}); Neden olduğu hakkında bir fikrin var mı?

— Gaston Coroleu

71

İmageUrl öğesinden önce ve sonra çift tırnak (") eklemek isteyeceksiniz:

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

Bu şekilde, görüntünün boşlukları varsa yine de bir özellik olarak ayarlanır.

— Arosboro
kaynak

6

bu durumda, olmalı$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— Arosboro

4

Alıntılar gerekli değildir: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— nullabilite

Bu benim için çözdü. Çift tırnaklara ihtiyacım vardı. Resim adlarım boşluk içeriyor. Aksi takdirde hiçbir şey olmazdı. $('.myObject').css('background-color', 'green'); Çalışmak gibi bir şey alabilirim , ancak görüntüyü çift tırnak olmadan değiştiremedim. Teşekkürler!

— Ghost Echo

1

encodeURIComponentURL'nizin bir kısmı zaten URL çıkış karakterleri içeriyorsa çalışmaz. Yine de imageUrl'de potansiyel çift tırnak karakteri kaçmalısınız:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

— Nicolas Garnier

Tarafından, işi $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');bana verdibackground-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

— Daerik

47

Diğerlerinin doğru şekilde önerdiklerine alternatif olarak, bireysel CSS ayarları (özellikle arka plan resmi URL'leri) yerine genellikle CSS sınıflarını değiştirmeyi daha kolay buluyorum. Örneğin:

// 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
kaynak

2

Bu bir şeyler yapmanın çok daha iyi bir yoludur çünkü bir css ön işlemcisi kullanmanıza izin verir.

— calumbrodie

Bu harika, daha doğrudan çözümden çok daha iyi.

— Magicode

Bu her iki görüntüyü de yükleyecektir.

— sheriffderek

Bu aslında önerilen bir çözüm müdür? Bu gereksiz yere daha fazla bilgi gerektiriyor gibi görünüyor, örneğin üçüncü bir arka plan görüntüsü olması durumunda, diğer tüm arka plan görüntülerini kaldırmanız veya alternatif olarak "mevcut" görüntüyü takip etmeniz gerekecektir. Ayrıca .css dosyalarındaki bu URI'ler gibi yapılandırma ayrıntılarına sahip olmak beni deli ediyor. : smiley: Kodun her yerinde arama yapmalıyım!

— Anne van Rossum

Böyle sınıfları kullanmak da benim tercihimdir çünkü kod ve stil arasında temiz bir ayrım yapmanıza izin verir. Daha sonra kodla uğraşmadan css'deki (medya seçicileri ve benzeri) tüm resimlerimi ve animasyonlarımı değiştirebilirim. Resimlerinizi kodun dışında tutarsanız, kodun her yerinde arama yapmanız gerekmez!

— Evan Langlois

14

İşte benim kod:

$ ('body'). css ('arka plan resmi', 'url ("/ apo / 1.jpg")');

Keyfini çıkar dostum

— Apo
kaynak

13

Diğer cevaplara ek olarak, "arka plan" da kullanabilirsiniz. Bu, özellikle görüntünün arka plan tarafından kullanım şekliyle ilgili diğer özellikleri ayarlamak istediğinizde yararlıdır, örneğin:

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

— Matt Parkins
kaynak

Bu yanıt, orijinal op'un arka plan resmi değil arka plan kullandığını düşündüğümde daha anlamlıydı. Cevabımı daha anlamlı olacak şekilde değiştirdim ve bunu yine de gelecek nesiller için burada bırakacağım.

— Matt Parkins

6

Değişken değil gerçek URL kullanan kullanıcılar için:

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

— Tozlu
kaynak

3

"Stil" özelliğini değiştirmeyi deneyin:

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

— appcropolis
kaynak

1

diğer tüm stillerin yerini alacak. Tavsiye edilmedi

— melvin

2

Kurtarmaya dize enterpolasyonu.

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

— Sushanth -
kaynak

1

Sahip olduğum sorun ;, url()değerin sonuna bir noktalı virgül eklemeye devam ettim , bu da kodun çalışmasını engelledi.

ÇALIŞMA KODU:

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

ÇALIŞMA KODU:

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

;Çalışma kodunun sonunda atlanan yarım sütuna dikkat edin . Doğru sözdizimini bilmiyordum ve bunu fark etmek gerçekten zor. Umarım bu aynı teknede başka birine yardımcı olur.

— PRID
kaynak

0

JQuery css işlevinin, aynı anda birden çok öğe ayarlamanıza izin veren nesnelerin geçirilmesine izin verdiğini unutmayın. Yanıtlanan kod daha sonra şöyle görünecektir:

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

— Antony
kaynak

-3

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

— Wahaj
kaynak

Bu URL çalışmaz, çünkü url tek tırnak içine alınır.

— Sal