ruby on rails - কিভাবে রেস 4 এর মধ্যে সিএসএস ইমেজ রেফারেন্স




ruby-on-rails heroku (11)

Heroku উপর Rails 4 সঙ্গে একটি অদ্ভুত সমস্যা আছে। যখন ছবিগুলি সংকলন করা হয় তখন তাদের কাছে হ্যাশ যোগ করা হয়েছে, তবে সিএসএসের মধ্যে থেকে যে ফাইলগুলি রেফারেন্স করা হয়েছে তার সঠিক নামটি ঠিক করা নেই। এখানে আমি বলতে চাচ্ছি। আমার logo.png নামক একটি ফাইল আছে। তবুও যখন এটি হরোকুতে দেখায় তখন এটি দেখতে পেল:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

তবে সিএসএস এখনও বলেছেন:

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

ফলাফল: ছবি প্রদর্শন করা হয় না। কেউ এই মধ্যে চালানো? কিভাবে এই সমাধান করা যাবে?


CSS মধ্যে

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

যদিও মূল পথ /assets/images/banner.jpg হয় তবে কনভেনশন অনুসারে আপনাকে কেবলমাত্র / সম্পত্তির / ইউআরএল পদ্ধতি যুক্ত করতে হবে


Rails 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");

আগ্রহজনকভাবে, যদি আমি 'পটভূমি-চিত্র' ব্যবহার করি, এটি কাজ করে না:

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

কিন্তু শুধু 'পটভূমি', এটি করে:

background: url('picture.png');

আপনি আপনার CSS.erb এক্সটেনশন যোগ করতে পারেন। EJ: style.css.erb

তারপর আপনি রাখতে পারেন:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

উত্তরগুলির কোনটিই উপায় সম্পর্কে বলছে না, যখন আমার .css.erb এক্সটেনশান থাকবে, কিভাবে চিত্রগুলি উল্লেখ করবেন। আমার জন্য উত্পাদন এবং উন্নয়নের পাশাপাশি উভয় কাজ করেছেন:

2.3.1 সিএসএস এবং ইআরবি

সম্পদ পাইপলাইন স্বয়ংক্রিয়ভাবে ERB মূল্যায়ন। এর অর্থ হল যদি আপনি কোন CSS এ্যাসেটে একটি এআরবি এক্সটেনশান যোগ করেন (উদাহরণস্বরূপ, application.css.erb ), তাহলে asset_path এর মতো asset_path আপনার CSS এর নিয়মগুলিতে উপলব্ধ:

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

এই উল্লেখ করা হচ্ছে নির্দিষ্ট সম্পদ পথ লিখেছেন। এই উদাহরণে, এ্যাপস লোড পাথগুলির মধ্যে একটি ইমেজ থাকা সত্ত্বেও app/assets/images/image.png , যা এখানে উল্লেখ করা হবে। যদি এই চিত্রটি ইতিমধ্যে public/assets আঙ্গুলের ছাপানো ফাইল হিসাবে পাওয়া যায়, তবে সেই পথটি উল্লেখ করা হয়।

যদি আপনি একটি ডাটা URI ব্যবহার করতে চান - সরাসরি সিএসএস ফাইলে ইমেজ ডেটা asset_data_uri করার asset_data_uri - আপনি asset_data_uri ব্যবহার করতে পারেন।

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

এটি CSS উত্সের মধ্যে সঠিকভাবে বিন্যস্ত ডেটা URI সন্নিবেশ করায়।

মনে রাখবেন ক্লোজিং ট্যাগ শৈলী হতে পারে না -%>।


এই প্রতি একক সময় আপনি সেখানে পেতে হবে।

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);


জানি না কেন, কিন্তু শুধুমাত্র আমার জন্য কাজ করা জিনিসটি image_path এর পরিবর্তে asset_path ব্যবহার করছে , যদিও আমার ছবিগুলি সম্পদ / চিত্র / ডিরেক্টরি অধীনে রয়েছে:

উদাহরণ:

app/assets/images/mypic.png

রুবি ইন:

asset_path('mypic.png')

ইন এসএসএসএস:

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

হালনাগাদ:

এটি figured out- এই সম্পদ সাহায্যকারী sass-rails জেম (যা আমি আমার প্রকল্পের মধ্যে ইনস্টল করা) থেকে আসা সক্রিয় আউট।


শুধু এই স্নিপেট আমার জন্য কাজ করে না:

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

কিন্তু stylename.scss নামকরণ stylename.css.scss আমাকে সাহায্য করে।


সাসের সাথে একসঙ্গে স্প্রকেটগুলি কিছু নিফটি সহায়ক রয়েছে যা আপনি কাজের জন্য ব্যবহার করতে পারেন। আপনার স্টাইলশীট ফাইল এক্সটেনশানগুলি যদি either .css.scss বা .css.sass হয় তবে স্প্রকেটগুলি শুধুমাত্র এই .css.scss প্রক্রিয়া করবে।

চিত্র নির্দিষ্ট সাহায্যকারী:

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")

http://guides.rubyonrails.org/asset_pipeline.html উল্লেখ করে আমরা দেখি যে CSS থেকে চিত্রগুলি লিঙ্ক করার কয়েকটি উপায় রয়েছে। শুধু বিভাগ 2.3.2 এ যান।

প্রথম, এটি একটি sass ফাইল যদি আপনার CSS ফাইলটি .scss এক্সটেনশন আছে তা নিশ্চিত করুন।

পরবর্তী, আপনি রুবি পদ্ধতি ব্যবহার করতে পারেন, যা সত্যিই কুৎসিত:

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

অথবা আপনি nicer নির্দিষ্ট ফর্ম ব্যবহার করতে পারেন:

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"






ruby-on-rails-4