मैं एक पूर्ण स्थान पर एक सीएसएस यूआरएल कैसे सेट करूं?

Question

मैं एक एचटीएमएल 5 मोबाइल एप्लिकेशन पर काम कर रहा हूँ और इस प्रकार मैं शुरू में एक DIV आइटम सीएसएस के माध्यम से सेट की पृष्ठभूमि है:

background-image: url('images/ClanSpider.png'); 

मेरे ऐप में, मैं एक विधि है कि पृष्ठभूमि के आधार पर DIV बदल जाता है एक चयन पिछले एक विधि jQuery का उपयोग करने से एक ड्रॉपडाउन सूची में किए गए:

function ResetMyHonor() 
{  
    ClanImage = 'images/Clan' + MyClanName + '.png'; 
    $("#MyClanName").html(MyClanName); 
    $("#MyHonorBox").css('backgroundImage', 'url(' + ClanImage + ')'); 
} 

यह सब ठीक काम करता है जब मैं अपने पेज की जड़ पर हूँ। हालांकि, मेरे पास पृष्ठ पर नेविगेट करने के लिए हैश टैग का उपयोग करके ऐप के कुछ लिंक हैं (जैसे #MyHonor)। जब मैंने इन टैग में से किसी एक पर नेविगेट किया है और ऊपर मेरे रीसेट फ़ंक्शन को कॉल किया है, तो छवि टूट जाती है। जब मैं डीआईवी टैग को देखने के लिए क्रोम इंस्पेक्टर खींचता हूं, तो यह कहता है कि जिस छवि को लोड करने का प्रयास कर रहा है वह "छवियां/MyHonor/ClanSpider.png" है जो मौजूद नहीं है।

मुझे पता है कि सीएसएस यूआरएल एप्लिकेशन के भीतर अपने स्थान के संदर्भ में लिंक उत्पन्न करेगा, लेकिन इससे कोई फर्क नहीं पड़ता कि मैं एप्लिकेशन में सीएसएस फ़ाइलों को कहां स्थानांतरित करता हूं।

वहाँ एक रास्ता मुझे के पुनर्लेखन के लिए के लिए क्या यूआरएल प्रसंस्करण या सर्वर साइड प्रसंस्करण के किसी भी प्रकार कर बिना DIV की पृष्ठभूमि छवि को निर्दिष्ट करने का एक वैकल्पिक तरीका से बाहर आता है? आदर्श रूप से यह ऐप एचटीएमएल 5 की मेनिफेस्ट कैश फीचर के माध्यम से चलाएगा, इसलिए मुझे किसी भी सर्वर आधारित भाषाओं तक पहुंच नहीं होगी।

Answer 1

टी वास्तव में मौजूद है। यदि url('/images/ClanSpider.png') वेब सर्वर पर अपलोड करते समय काम करने जा रहा है तो चाल स्थानीय रूप से काम करते समय इसे उसी तरह से काम करने के लिए है। ऐसा करने का सबसे आसान तरीका, विशेष रूप से यदि आपका ध्यान एक ऑफ़लाइन ऐप है जो सर्वर पक्ष की आवश्यकताओं के रास्ते में बहुत कम है (जो मुझे लगता है कि सत्य है, जैसा कि आपने file:/// यूआरआई का उल्लेख किया है), स्थानीय वेब सर्वर चलाने के लिए है ।

एक मॉड्यूल SimpleHTTPServer साथ

अजगर जहाजों, अगर आपके पास Python installed तो शुरू कर इसे एक कमांड प्रॉम्प्ट में अपने L5RHonor परियोजना निर्देशिका के लिए जा रहा है और जारी करने के लिए निम्न आदेश के रूप में सरल है: तो फिर

python -m SimpleHTTPServer 

बजाय अपने तक पहुँचने इस तरह यूआरआई के साथ फ़ाइलें:

file:///H:/Projects/L5RHonor/images/ClanSpider.png 

आप उन्हें इस तरह का उपयोग करेंगे:

http://localhost:8000/images/ClanSpider.png 

आपके सभी रूट सापेक्ष फ़ाइल पथ अब सही तरीके से काम करेंगे, क्योंकि एक अतिरिक्त बोनस ऑफ़लाइन कैशिंग क्रोम में सही तरीके से काम करेगा और आप कमांड प्रॉम्प्ट विंडो में लॉग से देख पाएंगे कि यह अनुरोध कर रहा है और कैशिंग आपके मैनिफेस्ट के अनुसार सही फाइलें।

Answer 2

सीएसएस फ़ाइल का स्थान अप्रासंगिक है, आप एक HTML तत्व की .style संपत्ति को संशोधित कर रहे हैं। यह विशेषता शैली का उपयोग करने जैसा ही है।

चूंकि यह दस्तावेज़ में एम्बेडेड सीएसएस है, इसलिए सभी यूआरआई दस्तावेज़ से संबंधित हैं।

आप शायद एक / साथ यूआरएल शुरू करना चाहते हैं, या यदि आप वास्तव में पूर्ण स्थान अपने प्रश्न में निर्दिष्ट हैं: जड़ का प्रतिनिधित्व करने के http://

Answer 3

उन रास्तों पर एक अग्रणी स्लैश डालने की कोशिश।

यानी उपयोग:

url('/images/ClanSpider.png') 

बजाय

की

url('images/ClanSpider.png') 

Answer 4

यूआरएल के शुरू में एक / जोड़ने का प्रयास करें?

Answer 5

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

संभव पृष्ठभूमि छवियों की संख्या सीमित है, तो आप अपनी खुद की एक कक्षा में हर एक निर्धारित कर सकते हैं:

.bgSpider { background-image: url('images/ClanSpider.png'); } 
.bgFalcon { background-image: url('images/ClanFalcon.png'); } 
... 

और फिर एक .addClass() करना सही छवि स्थापित करने के लिए।

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

// in the script head 
imageRoot = "http://www.example.com/mysite/images"; 
// later.... 
$("#MyHonorBox").css('backgroundImage', 'url(' + imageRoot + ClanImage + ')');