सीएसएस और JQuery: यूआरएल के छवि नाम ब्रेक कोड के अंदर रिक्त स्थान()

Question

मेरे पास एक पृष्ठ है जो थंबनेल पर आते समय छवि का एक बड़ा संस्करण प्रदर्शित करना है।

$(document).ready(function(){ 

    $('img').hover(function() { 

    var src = $("#im" + this.id).attr("src"); 
    $('#viewlarge').css('backgroundImage','url(' + src +')'); 
    return false; 
    }); 

}); 

छवियों मैं का उपयोग करें, एक रूबी स्क्रिप्ट के द्वारा उत्पन्न कर रहे हैं कि एक समान के साथ एक छवि "उत्पन्न", फिर भी:

मैं एक एक आईडी और JQuery कोड 'div' है निम्नलिखित के रूप में है अलग आईडी हालांकि, कभी-कभी, फ़ोटो अपलोड की जाती हैं जिनमें "रिक्त स्थान" होते हैं। मेरे डेवलपर टूल मुझे बताते हैं कि पृष्ठभूमि-छवि सही ढंग से सेट नहीं है, फिर भी छवि पथ सही है और ब्राउज़र को छवि ढूँढने में समस्या नहीं है।

मेरा सवाल है, क्या मैं किसी भी तरह से url 'src' को sanitize कर सकता हूं, तो रिक्त स्थान कोई समस्या नहीं होगी? मुझे इस सर्वर की ओर से करने के बारे में पता है, फिर भी मैं जानना चाहता हूं कि JQuery/JS के साथ यह कैसे करें।

धन्यवाद!

Answer 1

रिक्त स्थान किसी यूआरआई में मान्य नहीं हैं। उन्हें %20 पर एन्कोड किया जाना चाहिए।

आप src.replace(/ /g, '%20'), या अधिक सामान्यतः encodeURI(src) से %-सभी वर्णों को एनकोड करें जो यूआरआई में मान्य नहीं हैं। encodeURIComponent(src) अधिक आम है, लेकिन यह केवल तभी काम करेगा जब src केवल एक ही रिश्तेदार फ़ाइल नाम था; अन्यथा, यह / एन्कोड करेगा और पथ काम कर रहा है।

हालांकि, वास्तविक समस्या कि मूल img src पहले से ही टूटा हुआ है और केवल अपने त्रुटि को सही करने ब्राउज़र fixups करने के लिए धन्यवाद काम कर रहा है। आपको पृष्ठ उत्पन्न करने वाली रूबी स्क्रिप्ट को ठीक करने की आवश्यकता है। पथ में शामिल करने से पहले आपको फ़ाइल नाम को यूआरएल-एन्कोड करना चाहिए; ऐसे कई और पात्र हैं जो आपको केवल अंतरिक्ष की तुलना में समस्याएं पैदा कर सकते हैं।

जैसा कि पेक्का ने कहा था, आपको url(...) मान में यूआरएल के चारों ओर उद्धरणों का भी उपयोग करना चाहिए। जबकि आप उनके बिना कई यूआरएल के लिए दूर हो सकते हैं, कुछ पात्रों को \ से बचाना होगा। डबल-कोट्स का उपयोग करने का मतलब है कि आप इससे बच सकते हैं (कोई यूआरएल में डबल-कोट्स दिखाई नहीं दे सकते हैं)।

Answer 2

जावास्क्रिप्ट का उपयोग encode समारोह एन्कोड करने के लिए अपने 'src'

जैसे , सफेद

$('#viewlarge').css('backgroundImage','url("' + src +'")'); 

तथापि W3C specs के अनुसार,:

$('#viewlarge').css('backgroundImage','url(' + encode(src) +')'); 

मुझे लगता है कि आप भी जावास्क्रिप्ट 'escape' समारोह के रूप में अच्छी तरह से

$('#viewlarge').css('backgroundImage','url(' + escape(src) +')'); 

Answer 3

यूआरएल के आसपास जोड़ा जा रहा है उद्धरण चिह्नों का उपयोग कर सकते हैं की मदद करनी चाहिए अंतरिक्ष से बच जाना चाहिए, इसलिए यूआरएल एन्कोडिंग समाधान @ एंडी ई के सिर @bobince द्वारा प्रदान किया गया सबसे सुरक्षित है।

Answer 4

• सबसे पहले, आप ग्राहकों को अपनी छवियों का नाम निर्धारित क्यों कर रहे हैं?
• दूसरा, आप उन्हें क्यों स्वच्छ नहीं कर रहे हैं?
• तीसरा, मैं तुम्हें यूआरएल urlencoding नहीं कर रहे हैं संदेह है जब आप उन्हें एचटीएमएल

Answer 5

मैं करने के लिए अपने फ़ाइल नामों में रिक्तियों के साथ छवियों की अनुमति नहीं होगी (जो एक 20% में एक अंतरिक्ष बारी होगी) को लिखने अपलोड किया जाना - मुझे अच्छा अभ्यास प्रतीत नहीं होता है।

Answer 6

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

$("#viewlarge").css("background",'url(' + "'" + url+ "'" + ')'); 

मुझे आशा है कि यह मदद करता है!