CSS 4 के भीतर CSS में छवियों को कैसे देखें

205

हेरोकू पर रेल 4 के साथ एक अजीब मुद्दा है। जब छवियों को संकलित किया जाता है तो उनके पास जोड़ा गया है, फिर भी CSS के भीतर से उन फ़ाइलों के संदर्भ में उचित नाम समायोजित नहीं है। यहाँ मेरा मतलब है। मेरे पास एक फाइल है जिसका नाम logo.png है। फिर भी जब यह उसे इस रूप में देखा जाता है:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

हालाँकि सीएसएस अभी भी बताता है:

background-image:url("./logo.png");

परिणाम: छवि प्रदर्शित नहीं होती है। इसमें कोई चला? इसका समाधान कैसे हो सकता है?

ruby-on-rails  heroku  ruby-on-rails-4 
— निक ओनील
स्रोत
1
बस FYI करें, हरोकू ने पुष्टि की है कि यह एक बग है ... वे एक समाधान पर काम कर रहे हैं
— निक ओनील
क्या आप इस पर कोई अपडेट दे सकते हैं? मैं एक ही मुद्दा रहा हूँ
— मिन्ह दान

जवाबों:

392

Sass के साथ Sprockets के कुछ निफ्टी हेल्पर्स हैं जिनका उपयोग आप काम पाने के लिए कर सकते हैं। यदि आपकी स्टाइलशीट फ़ाइल एक्सटेंशन या तो हैं, तो Sprockets केवल इन सहायकों को संसाधित करेगा ।.css.scss.css.sass

छवि विशिष्ट सहायक:

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

अज्ञेय सहायक:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

या यदि आप छवि डेटा को css फ़ाइल में एम्बेड करना चाहते हैं:

background-image: asset-data-url("logo.png")
— zeeraw
स्रोत
21
asset-data-urlमेरे द्वारा अपने .css फ़ाइल को .css.scss फ़ाइल में एक नियम 4 ऐप में बदलने के बाद मेरे लिए काम करता है। धन्यवाद!
— fatman13
@ fatman13 हाँ, यह केवल .scss और .sass फ़ाइलों के साथ काम करता है जहाँ तक मुझे पता है।
— ज़ेराव
जेफ: दूसरों को आपकी संपत्ति प्रदान करने के लिए काम करता है url विकल्प सही तरीके से सेट किए गए हैं। यह लागू नहीं होता है asset-data-urlक्योंकि यह स्टाइलशीट के अंदर पूरी फ़ाइल को एम्बेड करता है।
— ज़ेराव
1
@ Fatman13 की ही तरह से मैं उपयोग कर रहा था sass-railsमैं अंत में फाइल एक्सटेंशन जोड़ने समाप्त .scssहमलावर .css फ़ाइल के लिए (रों) तो वे सभी अंत .css.scssहै, तो के सभी उदाहरणों की जगह url('blah.png')के साथ url(asset-path('blah.png'))(मेरे मामले में सभी blah.pngs एक में थे /vendorएड फ़ोल्डर)।
— likethesky
asset-url($asset)$asset-type
— स्प्रोकेट
59

पता नहीं क्यों, लेकिन केवल बात यह है कि मेरे लिए काम किया था का उपयोग कर asset_path बजाय का IMAGE_PATH , भले ही अपनी छवियों के तहत कर रहे संपत्ति / images / निर्देशिका:

उदाहरण:

app/assets/images/mypic.png

रूबी में:

asset_path('mypic.png')

Inscss:

url(asset-path('mypic.png'))

अपडेट करें:

यह पता लगाया- पता चलता है कि ये एसेट हेल्पर्स सैस-रेल रत्न (जो मैंने अपने प्रोजेक्ट में स्थापित किए थे) से आते हैं।

— Yarin
स्रोत
2
मेरे लिए काम करता है, वास्तव में बहुत अच्छा रेल रास्ता समाधान। धन्यवाद @ यारिन
— AMIC MING
1
हाँ! दीवार पर मेरा सिर पीटने के कई घंटों के बाद, आपके "एसेट-पाथ" समाधान ने आखिरकार मेरे .css.scss फ़ाइल पर मेरे लिए काम किया! background-image: url(asset-path('off.png'))
— रेमंड गन
36

रेल 4 में, आप assets/images/अपनी .SCSSफ़ाइलों में स्थित छवि को इस तरह आसानी से संदर्भित कर सकते हैं :

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

जब आप एप्लिकेशन को डेवलपमेंट मोड ( localhost:3000) में लॉन्च करते हैं , तो आपको कुछ इस तरह देखना चाहिए:

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

उत्पादन मोड में, आपकी संपत्ति में कैश हेल्पर संख्या होगी:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");
— sergserg
स्रोत
1
@ माइकलाइन्स: बस इसे एक नई रेल 4.1 परियोजना पर परीक्षण किया और हरोकू में तैनात किया और यह मेरे लिए ठीक काम कर रहा है। आपने किसी चीज को छुआ होगा production.rb।
— सर्जग्रे
25

हैश क्योंकि परिसंपत्ति पाइपलाइन और सर्वर कैशिंग http://guides.rubyonrails.org/asset_pipip.html

कुछ इस तरह की कोशिश करो:

 background-image: url(image_path('check.png'));

सौभाग्य

— मौरो डायस
स्रोत
मेरे लिए काम किया! धन्यवाद :)
— डैनियल
आपके मामले में फाइल एक्सटेंशन क्या होना चाहिए? केवल .cssमेरे लिए काम नहीं किया।
— अरुप रक्षित
मेरे लिए काम! धन्यवाद भाई!
— एलेजांद्रोजेएसआर
11

सीएसएस में 

background: url("/assets/banner.jpg");

यद्यपि मूल पथ /assets/images/banner.jpg है, लेकिन अधिवेशन द्वारा आपको यूआरएल विधि में सिर्फ / संपत्ति / जोड़ना होगा

— user2458192
स्रोत
1
सादे ओल सीएसएस का उपयोग करते हुए, मैंने सोचा कि मैं पागल हो रहा था - धन्यवाद!
— क्रेग मैकफफ
2
यह उत्पादन में संकलित नहीं होगा
— डिमिट्री_ एन
वाह, धन्यवाद, यह बहुत सहज नहीं है। इसलिए मैं संपत्ति पथ में सभी परिसंपत्तियों लगता है ( vendor/assets, app/assets, lib/assets, आदि) एक भी संपत्ति में पूर्वव्याप्त के बाद संयुक्त मिल फ़ोल्डर पूरा हो गया है?
— ओह्ह
यह प्रोडक्शन में काम नहीं करेगा क्योंकि प्रोडक्शन में आपकी संपत्तियों का संकलन एमडी 5 हैश के नाम के अंत में हो जाता है और विशिष्ट सेटिंग्स के साथ /assets/banner.jpgकाम नहीं करेगा। इसके बजाय यह कुछ ऐसा होगा /assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg। TL; DR यह प्रयोग न करें।
— यहोशू पिंटर
10

कोई भी उत्तर रास्ते के बारे में नहीं कहता है, जब मेरे पास .css.erbविस्तार होगा, तो छवियों को कैसे संदर्भित किया जाए । मेरे लिए उत्पादन और विकास दोनों में काम किया :

2.3.1 सीएसएस और ईआरबी

परिसंपत्ति पाइपलाइन स्वचालित रूप से ईआरबी का मूल्यांकन करता है । इसका मतलब है कि यदि आप CSS संपत्ति (उदाहरण के लिए application.css.erb) में erb एक्सटेंशन जोड़ते हैं , तो asset_pathआपके CSS नियमों में मददगार उपलब्ध हैं:

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

यह विशेष संपत्ति को संदर्भित होने का मार्ग लिखता है। इस उदाहरण में, एसेट लोड रास्तों में से किसी एक में एक छवि होना समझ में आता है, जैसे कि app/assets/images/image.pngयहां संदर्भित किया जाएगा। यदि यह चित्र पहले से ही public/assetsफ़िंगरप्रिंट फ़ाइल के रूप में उपलब्ध है , तो उस पथ को संदर्भित किया जाता है।

यदि आप डेटा यूआरआई का उपयोग करना चाहते हैं - छवि डेटा को सीधे सीएसएस फ़ाइल में एम्बेड करने की एक विधि - आप asset_data_uriसहायक का उपयोग कर सकते हैं ।

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

यह सही ढंग से स्वरूपित डेटा URI को CSS स्रोत में सम्मिलित करता है।

ध्यान दें कि समापन टैग शैली का नहीं हो सकता है -%>।

— अरूप रक्षित
स्रोत
5

केवल यह स्निपेट मेरे लिए काम नहीं करता है:

background-image: url(image_path('transparent_2x2.png'));

लेकिन stylename.scss को stylename.css.scss नाम बदलने से मुझे मदद मिलती है।

— s.vatagin
स्रोत
4

रेल दस्तावेजों को संदर्भित करते हुए हम देखते हैं कि सीएसएस से छवियों को लिंक करने के कुछ तरीके हैं। बस 2.3.2 सेक्शन में जाएँ।

सबसे पहले, सुनिश्चित करें कि अगर यह एक sass फ़ाइल है तो आपकी css फ़ाइल में .scss एक्सटेंशन है।

अगला, आप रूबी विधि का उपयोग कर सकते हैं, जो वास्तव में बदसूरत है:

#logo { background: url(<%= asset_data_uri 'logo.png' %>) }

या आप विशिष्ट रूप का उपयोग कर सकते हैं जो कि अच्छा है:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

अंत में, आप सामान्य फॉर्म का उपयोग कर सकते हैं: 

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"
— निक रेस
स्रोत
3

मैं इस के साथ काम करने से पहले क्या कर रहा हूँ:

कार्य:

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

उपरोक्त कुछ इस तरह का उत्पादन करता है: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

सूचना अग्रणी "/" , और यह उद्धरण के भीतर है । यह भी ध्यान रखें कि scst extension और your_stylesheet.css.scss में image_path सहायक है। छवि एप्लिकेशन / संपत्ति / चित्र निर्देशिका में है ।

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

background: url(image_path('transparent_2x2.png') repeat center center fixed;

काम नहीं करता, अमान्य संपत्ति:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

मेरा अंतिम उपाय मेरी सार्वजनिक s3 बाल्टी में इन्हें डालना और वहां से लोड करना था, लेकिन अंत में कुछ जा रहा था।

— डैनी
स्रोत
यहां आने वाले और अभी भी परेशानियों वाले लोगों के लिए: सुनिश्चित करें कि आपकी सीएसएस फ़ाइल अपडेट हो गई है और आपने अपनी संपत्ति को स्थानीय स्तर पर नहीं बनाया है और उन्हें अपडेट करने के बारे में भूल गए हैं।
— हार्टविग
हार्टविग - इसका क्या मतलब है? क्या इसका मतलब है कि इस विधि के काम करने से पहले आपको फिर से प्री-कम्पाइल चलाना होगा? मैंने इस पोस्ट (सब कुछ) पर सुझाए गए सभी चीजों की कोशिश की है और मेरे लिए कुछ भी काम नहीं कर रहा है
— मेल
2

दिलचस्प है, अगर मैं 'पृष्ठभूमि-छवि' का उपयोग करता हूं, तो यह काम नहीं करता है:

background-image: url('picture.png');

लेकिन सिर्फ 'पृष्ठभूमि', यह करता है:

background: url('picture.png');
— एंडरसन
स्रोत
लेकिन यह केवल scss फ़ाइल से काम करता है, तब नहीं जब एक div के भीतर एक स्टाइल प्रॉपर्टी असाइनमेंट में रखा जाता है ... मैं भ्रमित हूँ
— AnderSon
1

मणि 'sass-rails' का उपयोग करते समय, रेल्स 5, बूटस्ट्रैप 4 में, निम्नलिखित ने मेरे लिए काम किया,

.scss फ़ाइल में:

    background-image: url(asset_path("black_left_arrow.svg"));

दृश्य फ़ाइल में (उदाहरण के लिए .html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");
— Mehreen
स्रोत
0

डिफ़ॉल्ट रूप से रेल 4 आपकी संपत्ति की सेवा नहीं करेगी। इस कार्यक्षमता को सक्षम करने के लिए आपको config / application.rb में जाना होगा और इस लाइन को जोड़ना होगा:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

— ksiomelo
स्रोत
1
यह काम करता है, लेकिन क्या यह संपत्ति के लाभ को कम करने में मदद नहीं करेगा?
— १५:०६ पर आर्कोलाई
0

रेल 4 में, बस का उपयोग करें

.hero { background-image: url("picture.jpg"); }

जब तक बैकग्राउंड इमेज ऐप / एसेट्स / इमेजेज में टक नहीं हो जाती, तब तक आपकी style.css फाइल में।

— Boussac
स्रोत
पढ़ें पूरा सवाल
— एड्रियानो रेनेडे
0

आप अपने css .erb एक्सटेंशन में जोड़ सकते हैं। Ej: style.css.erb

तो आप डाल सकते हैं:

background: url(<%= asset_path 'logo.png' %>) no-repeat;
— मतिआस सेगुएल
स्रोत
0

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

background: #4C2516 url('imagename.png') repeat-y 0 0;
— Tolome
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.