4 छवि-पथ, छवि-यूआरएल और एसेट-यूआरएल रेल SCSS फ़ाइलों में काम नहीं करते

99

क्या हम image-urlRails 4 में औरों से अलग कुछ और उपयोग करने वाले हैं ? वे विभिन्न मूल्यों को वापस करते हैं जो समझ में नहीं आते हैं। अगर मेरे पास logo.pngहै /app/assets/images/logo.pngऔर मैं निम्नलिखित कार्य करता हूं, तो मुझे यही मिलेगा:

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

बेशक इनमें से कोई भी काम नहीं है क्योंकि उन्हें कम से कम /assetsसामने की जरूरत है ।

अद्यतन : वास्तव में, मैंने अभी देखा, मैं रेल 4 में छवियों का उपयोग कैसे करूं? मैं कम से एक छवि है/app/assets/images/logo.png। लेकिन अगर मैं निम्नलिखित में से किसी भी URL पर जाता हूं, तब भी मुझे अपनी छवि दिखाई नहीं देती:

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

अद्यतन 2 : एकमात्र तरीका जो मैं अपने ऊपर ला सकता हूंlogo.pngवह है इसे/app/assets/stylesheetsनिर्देशिकामें ले जाकरऔर फिर ऊपर खींचकर:

http://localhost:3000/assets/logo.png

ruby-on-rails asset-pipeline ruby-on-rails-4

— पर।
स्रोत

इसे आज़माएं:asset_path("logo.png", image)

— मार्सेलो डी पोली

@depa - वह बस "/logo.png" में परिवर्तित हो गई, जो मेरी छवि को नहीं लाती है।

— पर।

3

क्या आप किसी .cssफाइल के अंदर या किसी फाइल में उस सहायक का उपयोग कर रहे हैं .css.scss?

— मार्सेलो डे पोली

@depa - किसी सहायक का उपयोग नहीं करना। मुझे लगता है कि यह मेरी छवियों फ़ोल्डर के लिए काम नहीं कर रही संपत्ति की एक बड़ी समस्या है

— पर।

1

@ दीपा - ओह मैं देख रही हूँ कि तुम क्या पूछ रहे हो। यह एक .css.scssफ़ाइल के अंदर है

— पर।

113

मैं सिर्फ इस मुद्दे को खुद था। उम्मीद है कि मदद मिलेगी 3 अंक:

यदि आप अपनी app/assets/imagesनिर्देशिका में छवियां रखते हैं , तो आपको सीधे पथ में कोई उपसर्ग के साथ छवि को कॉल करने में सक्षम होना चाहिए। अर्थात।image_url('logo.png')
आपके द्वारा उपयोग की जाने वाली संपत्ति के आधार पर विधि पर निर्भर करेगा। यदि आप इसे एक background-image:संपत्ति के रूप में उपयोग कर रहे हैं, तो आपका कोड ऑफ लाइन होना चाहिए background-image: image-url('logo.png')। यह कम और सैस स्टाइलशीट दोनों के लिए काम करता है। यदि आप दृश्य में इनलाइन का उपयोग कर रहे हैं, तो आपको बिल्ट इन का उपयोग करने की आवश्यकता होगीimage_tag अपनी छवि को आउटपुट करने के लिए रेलों में हेल्पर । एक बार फिर, कोई उपसर्ग नहीं<%= image_tag 'logo.png' %>
अंत में, यदि आप अपनी संपत्ति को रोक रहे हैं, तो rake assets:precompileअपनी संपत्ति बनाने के लिए, या rake assets:precompile RAILS_ENV=productionउत्पादन के लिए दौड़ें , अन्यथा, पेज को लोड करते समय आपके उत्पादन वातावरण में फिंगरप्रिंट की संपत्ति नहीं होगी।

इसके अलावा बिंदु 3 में उन आदेशों के लिए आपको उनके साथ उपसर्ग करने की आवश्यकता होगी bundle execयदि आप बंडलर चला रहे हैं।

— cdaloisio
स्रोत

1

एक अन्य बिंदु प्रलेखन गाइड पढ़ने के लिए है ।rubyonrails.org/asset_pipeline.html । यदि आप छवियों को लोड कर रहे हैं, तो क्या आप अपने ब्राउज़र के वेब डेवलपर डिबग में भी देख सकते हैं?

— एच। राबिया

3

अब यह है कि आप एक उत्तर कैसे लिखते हैं। प्रत्येक परिदृश्य। "क्या अगर", की भविष्यवाणी करते हुए, कोई भी ढीला समाप्त नहीं होता है। किसी ऐसे व्यक्ति का निशान जिसने "युद्ध देखा है" (वास्तव में समस्या के माध्यम से काम किया है)।

— अहानिबेकाड

मुझे कई अवसरों पर R नाखून_ENV = उत्पादन याद आ रहा है।

— छह सायं

62

आपका पहला सूत्रीकरण, image_url('logo.png')सही है। यदि छवि मिलती है, तो यह पथ उत्पन्न करेगा /assets/logo.png(साथ ही उत्पादन में एक हैश)। हालाँकि, यदि रेल आपके द्वारा नामित छवि को नहीं पा सकती है, तो यह वापस आ जाएगी/images/logo.png ।

अगला सवाल है: रेल आपकी छवि क्यों नहीं खोज रही है? यदि आप इसे ऐप / एसेट्स / इमेज / लोगो.पिंग में डालते हैं, तो आपको इसे एक्सेस करने में सक्षम होना चाहिएhttp://localhost:3000/assets/logo.png ।

यदि वह काम करता है, लेकिन आपका CSS अपडेट नहीं हो रहा है, तो आपको कैश क्लियर करना पड़ सकता है। हटाएंtmp/cache/assetsअपने प्रोजेक्ट डायरेक्टरी से और सर्वर (वेब्रिक, आदि) को पुनरारंभ करें।

यदि वह विफल हो जाता है, तो आप बस उसी के उपयोग की कोशिश कर सकते हैं background-image: url(logo.png);जो आपके सीएसएस को उसी रिश्तेदार पथ के साथ फ़ाइलों की तलाश में लाएगा (जो इस मामले में / संपत्ति है)।

— निक अर्बन
स्रोत

2

बस इस पर कूदने के लिए, मुझे एकल उद्धरणों के बजाय छवि पथ पर दोहरे उद्धरणों का उपयोग करके काट लिया गया था। आप css / scss फाइलों में एसेट हेल्पर्स के साथ सिंगल कोट्स का उपयोग करते हैं।

— d_ethier

मुझे "अपरिभाषित स्थानीय चर या तरीका` छवि 'मिल रहा है

— मुहम्मद उमर

क्या यह संभव है कि आपने गलती से शब्द छवि से पहले एक स्थान रखा हो?

— निक अर्बन

10

मुझे अभी पता चला है, कि asset_urlहेल्पर का उपयोग करके आप उस समस्या को हल करते हैं।

asset_url("backgrounds/pattern.png", image)

— Leftis
स्रोत

मुझे undefined local variable or method 'image'त्रुटि मिली ।

— पेंगुइन

हो सकता है रेल पर कुछ बदला हो, यह जवाब पुराना है! आप कोशिश कर सकते हैंasset_path("<your_path>", type: :image)

— वामपंथी

8

मुझे एक समान समस्या थी, इनलाइन सीएसएस के साथ एक पृष्ठभूमि छवि जोड़ने की कोशिश करना। एसेट सिंक के काम करने के तरीके के कारण इमेज फोल्डर को निर्दिष्ट करने की आवश्यकता नहीं है।

यह मेरे लिए काम किया:

background-image: url('/assets/image.jpg');

— ykwx
स्रोत

धन्यवाद, मैं कर रहा था assets/img.jpgया ../assets/img.jpgजो स्पष्ट रूप से किसी भी निर्देशिका में काम नहीं करता है। /assets/img.jpgकर देता है। TY

— इलियटम

5

रेल 4.0.0 image-urlआपकी सीएसएस फ़ाइल के साथ एक ही निर्देशिका संरचना में परिभाषित छवि दिखाई देगी ।

उदाहरण के लिए, यदि आपके सीएसएस में assets/stylesheets/main.css.scss,image-url('logo.png') हो जाता है url(/assets/logo.png)।

यदि आप अपनी css फ़ाइल को इसमें स्थानांतरित करते हैं assets/stylesheets/cpanel/main.css.scss,image-url('logo.png') बन जाता है/assets/cpanel/logo.png ।

यदि आप छवि को सीधे संपत्ति / छवियों निर्देशिका के तहत उपयोग करना चाहते हैं, तो आप उपयोग कर सकते हैं asset-url('logo.png')

— kuntoaji
स्रोत

5

स्टाइलशीट के लिए: url (संपत्ति_पथ ('image.jpg'))

— user2586863
स्रोत

3

मुख्य अंतर क्या है url(asset_path('image.jpg'), url('image.jpg')और image-url('image.jpg')? मैं के साथ काम कर रहा हूँ रेल 5.0.0.1 और url()में ठीक काम करता है एससीएसएस फ़ाइलें और में html.erb फ़ाइलों का उपयोग मैं asset_path()तो मैं जाने के लिए सही तरीका जानना चाहते हैं। अग्रिम में धन्यवाद।

— अलेवेंटुराइयो

asset_pathएक परिशिष्ट परिशिष्ट में छवि फ़ाइल में जोड़ें। यह वास्तव में उत्पादन के लिए है, हर तैनाती के बाद एक पाचन परिशिष्ट बदल जाएगा और उपयोगकर्ता का ब्राउज़र छवियों के नए संस्करण को डाउनलोड करेगा।

— एलेक्स कोजिन