JQuery CSS संपत्ति का उपयोग करके पृष्ठभूमि-छवि सेट करना

Question

मेरे पास एक imageUrlचर में एक छवि URL है और मैं इसे jQuery का उपयोग करके CSS शैली के रूप में सेट करने का प्रयास कर रहा हूं:

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

ऐसा लगता है कि काम नहीं कर रहा है:

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

लौटता है none।

कोई आइडिया है कि मैं क्या गलत कर रहा हूँ?

Comments

वास्तव में मुद्दा क्या है? क्या जेकरी एक त्रुटि फेंक रहा है?

— माइक_जी

नहीं, इसकी ठीक से स्थापना नहीं। मैं इसे लॉग कर रहा हूं और यह सिर्फ बदल नहीं रहा है।

— ब्लेंकमैन

पहली बार jQuery यह अनुमान लगाने की कोशिश नहीं करता है कि उपयोगकर्ता का क्या मतलब है।

— gblazex

Answer 1

आप शायद यह चाहते हैं (इसे सामान्य सीएसएस पृष्ठभूमि-छवि घोषणा की तरह बनाने के लिए):

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

Comments

मैं इसे इस तरह से कर रहा था - लेकिन 'url' और बाएँ कोष्ठक के बीच का एक स्थान मेरे कोड को विफल कर रहा था। आपका कॉपी / पेस्ट किया और समस्या का एहसास हुआ। धन्यवाद!

— 15

मैं इस स्क्रिप्ट में आपके कोड का उपयोग कर रहा हूं, लेकिन मुझे पृष्ठभूमि-छवि प्राप्त करें: url ((अज्ञात)); यह मेरी स्क्रिप्ट है: var bg_img = jQuery ('। Wp-show-posts-inner-)'; Attr ('data-src'); jQuery ('। wp-show-posts-inner-)'। ('mouseover', function () {-2009 ('home-banner .bg') पर। css ('बैकग्राउंड-इमेज', 'url (' + gg_img) + ')');}); कोई विचार क्यों?

— गैस्टन कोरोले

Answer 2

आप इस तरह से पहले और छवि के बाद दोहरे उद्धरण (") को शामिल करना चाहेंगे:

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

इस तरह, यदि छवि में स्थान हैं तो यह अभी भी एक संपत्ति के रूप में सेट किया जाएगा।

Comments

उस स्थिति में, यह होना चाहिए$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— एरोसबोरो

उद्धरण आवश्यक नहीं हैं: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— nullability

इससे मेरे लिए हल हो गया। मुझे दोहरे उद्धरण चिह्नों की आवश्यकता थी। मेरी छवि के नामों में रिक्त स्थान हैं। नहीं तो कुछ नहीं होता। मुझे $('.myObject').css('background-color', 'green'); काम करने के लिए कुछ मिल सकता है , लेकिन डबल कोट्स के बिना छवि नहीं बदल सकती। धन्यवाद!

— भूत इको

encodeURIComponentयदि आपके URL के भाग में पहले से ही मौजूद URL बच गए वर्णों से काम नहीं चलेगा। आपको छवि में संभावित दोहरे उद्धरण चरित्र से बचना चाहिए हालांकि:$('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");

— Daerik

Answer 3

वैकल्पिक रूप से जो अन्य सही ढंग से सुझाव दे रहे हैं, मुझे व्यक्तिगत सीएसएस सेटिंग्स (विशेष रूप से पृष्ठभूमि छवि यूआरएल) के बजाय, सीएसएस कक्षाओं को टॉगल करना आसान लगता है। उदाहरण के लिए:

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

Comments

यह चीजों को करने का एक बेहतर तरीका है क्योंकि यह आपको एक css प्री प्रोसेसर का उपयोग करने देता है।

— कैलेम्ब्रोडी

यह अधिक प्रत्यक्ष समाधान की तुलना में बहुत अच्छा है।

— मैजिकोड

यह हालांकि दोनों छवियों को लोड करने जा रहा है।

— शेरिफडेरेक

क्या यह वास्तव में एक अनुशंसित समाधान है? ऐसा लगता है कि यह अनावश्यक रूप से अधिक जानकारी की आवश्यकता है, उदाहरण के लिए अगर तीसरी संभव पृष्ठभूमि छवि है, तो आपको अन्य सभी पृष्ठभूमि छवियों को हटाने की आवश्यकता होगी, या वैकल्पिक रूप से "वर्तमान" छवि का ट्रैक रखना होगा। और कॉन्फ़िगरेशन विवरण भी, जैसे कि इन URIs .css फ़ाइलों में मुझे पागल कर देता है। : स्माइली: मुझे सभी कोड में खोज करनी है!

— ऐनी वैन रोसुम

इस तरह की कक्षाओं का उपयोग करना भी मेरी प्राथमिकता है क्योंकि यह आपको कोड और शैली के बीच एक साफ पृथक्करण रखने देता है। फिर मैं कोड के साथ खिलवाड़ किए बिना अपनी सभी छवियों और एनिमेशन को सीएसएस (मीडिया चयनकर्ताओं और ऐसे) के माध्यम से बदल सकता हूं। यदि आप अपनी छवियों को कोड से बाहर रखते हैं, तो आपको पूरे कोड की खोज करने की आवश्यकता नहीं है!

— इवान लैंग्लोइस

Answer 4

यहाँ मेरा कोड है:

$ ('बॉडी')। css ('बैकग्राउंड-इमेज', 'url ("/ apo / 1.jpg")');

आनंद लें, दोस्त

Answer 5

अन्य उत्तरों के आगे, आप "पृष्ठभूमि" का भी उपयोग कर सकते हैं। यह विशेष रूप से तब उपयोगी होता है जब आप पृष्ठभूमि द्वारा उपयोग की जाने वाली छवि से संबंधित अन्य गुण सेट करना चाहते हैं, जैसे:

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

Comments

जब मैंने सोचा कि मूल ऑप ने पृष्ठभूमि-छवि का उपयोग नहीं किया था, तो इस जवाब ने और अधिक समझ में आया। मैंने और अधिक समझ बनाने के लिए अपने उत्तर को संशोधित किया है, और मैं इसे यहाँ पोस्टीरिटी के लिए छोड़ दूँगा।

— मैट पार्किन्स

Answer 6

एक वास्तविक URL का उपयोग करने वालों के लिए और एक चर नहीं:

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

Answer 7

"शैली" विशेषता को संशोधित करने का प्रयास करें:

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

Comments

अन्य सभी शैलियों की जगह लेगा। अनुशंसित नहीं

— मेल्विन

Answer 8

बचाव के लिए स्ट्रिंग प्रक्षेप।

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

Answer 9

मेरे पास जो समस्या थी, वह यह है कि मैं मूल्य ;के अंत में एक अर्ध-बृहदान्त्र को जोड़ता रहा url(), जिसने कोड को काम करने से रोक दिया।

काम नहीं कर रहा:

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

काम कर रहे कोड:

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

;काम कोड में अंत में छोड़े गए अर्ध-कोलन को नोटिस करें । मैं बस सही वाक्यविन्यास नहीं जानता था, और इसे नोटिस करना वास्तव में कठिन है। उम्मीद है कि यह एक ही नाव में किसी और की मदद करता है।

Answer 10

यह मत भूलो कि jQuery css फ़ंक्शन ऑब्जेक्ट्स को पारित करने की अनुमति देता है जो आपको एक ही समय में कई आइटम सेट करने की अनुमति देता है। उत्तर कोड तब इस तरह दिखेगा:

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

Answer 11

$ ('myObject')। css ({'बैकग्राउंड-इमेज': 'url (imgUrl)',});

Comments

यह काम नहीं करेगा क्योंकि url एकल उद्धरणों में संलग्न है।

— साल