2011-09-11 12 views
25

सीएसएस फ़ाइलों में, आप का उपयोग करके (फिंगरप्रिंट के साथ) एक छवि संपत्ति का उचित नाम प्राप्त कर सकते हैं:रेल 3.1 3.1 पाइपलाइन का उपयोग कर जावास्क्रिप्ट कोड में छवियों का यूआरएल?

background-image: url(image-url("rails.png")) 

लेकिन कैसे आप फ़ाइल के लिए JavaScript से भी ऐसा ही करते हैं?

+0

क्या आप इसका सीएसएस और एचटीएमएल में उदाहरण का उपयोग कर सकते हैं? – kzh

+2

@kzh, मैंने पहले ही यह किया है। – Pablo

+2

आपको 'पृष्ठभूमि-छवि: छवि-यूआरएल ("rails.png") का उपयोग करना चाहिए। हालांकि इस प्रश्न के लिए प्रासंगिक नहीं है ... – raven

उत्तर

48

मैं तुम्हें सास सहायक विधि का उपयोग कर रहे हैं।

मानक (गैर सास) सीएसएस में आप कुछ इस तरह करते हैं:

file_name.css.erb

जावास्क्रिप्ट के लिए:

.class { background-image: url(<%= asset_path 'image.png' %>) }

सीएसएस फ़ाइल ERB एक्सटेंशन को जोड़ा गया है की आवश्यकता होगी वही नियम लागू:

file_name.js.erb

और फ़ाइल में:

var image_path = '<%= asset_path 'image.png' %>'

रेल asset pipeline guide कैसे इन सुविधाओं का उपयोग करने के बारे में जानकारी का बहुत अच्छा स्रोत है।

+6

उत्तर, संक्षेप में, erb का उपयोग करें। – Pablo

2

रेल 4 में, बजाय एक js.erb दृश्य का उपयोग कर के मैं सुझाव है कि आप संपत्ति पाइप लाइन पर बने रहें और एक चर बजाय gon या कुछ अन्य तकनीक पर चर्चा उपयोग करने के साथ यह करने के लिए यूआरएल पारित: gon साथ Ruby on Rails - Send JavaScript variable from controller to external Javascript asset file

:

एप्लिकेशन/विचारों/लेआउट/application.html.erb:

<head> 
    <meta charset="utf-8"/> 
    <%= include_gon %> 

एप्लिकेशन/नियंत्रक/application_controller.rb:

before_filter { gon.path = asset_path 'image.png' } 

एप्लिकेशन/आस्तियों/javascripts/file.js.coffee:

alert gon.path 

इस विधि तेजी क्योंकि फ़ाइल स्टार्टअप पर केवल एक बार precompiled है, पर रेल के माध्यम से सर्वर के बजाय परोसा जाता है, और जेएस के बाकी के रूप में एक ही HTTP अनुरोध।

संबंधित मुद्दे