সিলেসে ছবিগুলি কীভাবে রেলে 4 এর মধ্যে উল্লেখ করা যায়

Question

হেরোকুতে রেল 4 নিয়ে আজব সমস্যা আছে। চিত্রগুলি সংকলিত হয়ে গেলে তাদের সাথে হ্যাশ যুক্ত করা হয়, তবুও CSS এর মধ্যে থাকা এই ফাইলগুলির রেফারেন্সটিতে সঠিক নামটি সামঞ্জস্য করা হয় না। এখানে আমি যা বলতে চাইছি তা এখানে। আমার লোগো.পিএনজি নামে একটি ফাইল আছে। তবুও যখন এটি হিরকুতে প্রদর্শিত হয় তখন এটি হিসাবে দেখা হয়:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

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

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

ফলাফল: চিত্রটি প্রদর্শিত হয় না। কেউ কি এর মধ্যে দৌড়ায়? এটি কীভাবে সমাধান করা যায়?

Comments

শুধু এফওয়াইআই, হেরোকু নিশ্চিত করেছে যে এটি একটি বাগ ... তারা একটি সমাধানে কাজ করছে

— নিক ওনিল

আপনি কি এই সম্পর্কে একটি আপডেট দিতে পারেন? আমার একই সমস্যা হচ্ছে

— মিন দানহ

Answer 1

সাসের সাথে স্প্রোকেটগুলিতে কিছু নিফটি সহায়ক রয়েছে যা আপনি কাজটি পেতে ব্যবহার করতে পারেন। 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")

Comments

asset-data-urlআমি একটি রেলস 4 অ্যাপে আমার .css ফাইলটিকে .css.scss ফাইলটিতে পরিবর্তন করার পরে আমার পক্ষে কাজ করে। ধন্যবাদ!

— ফ্যাটম্যান 13

@ ফ্যাটম্যান 13 হ্যাঁ, এটি কেবলমাত্র আমার জানা মতে .scss এবং .sass ফাইলগুলির সাথে কাজ করে।

— জীরাউ

জেফ: আপনার সম্পদ ইউআরএল বিকল্পগুলি সঠিকভাবে সেট আপ হয়ে থাকে অন্যরা কাজ করে। এটি asset-data-urlস্টাইলশীটের ভিতরে পুরো ফাইলটি এম্বেড করার জন্য এটি প্রয়োগ করে না ।

— জিরাউ

@ Fatman13 অনুরূপ যেহেতু আমি ব্যবহার করছিলেন sass-railsপরিশেষে আমি ফাইল এক্সটেনশন যোগ শেষ পর্যন্ত .scssআপত্তিকর সিএসএস ফাইলে (গুলি) তাই তারা সমস্ত শেষ .css.scss, তারপর সমস্ত উদাহরণ প্রতিস্থাপিত url('blah.png')সঙ্গে url(asset-path('blah.png'))(আমার ক্ষেত্রে সব blah.pngs একটি ছিল /vendorইডি ফোল্ডারের)।

— likethesky

asset-url($asset)স্প্রোকেট 3 এর জন্য ব্যবহার করা উচিত, সংস্করণটি $asset-typeসম্ভবত কিছু পুরানো সংস্করণের সাথে কাজ করে

— প্রসওয়ান

Answer 2

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

উদাহরণ:

app/assets/images/mypic.png

রুবিতে:

asset_path('mypic.png')

এসএসএসএসে:

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

---

হালনাগাদ:

এটি প্রমাণিত হয়েছে - এই সম্পদ সহায়করা সাস-রেল মণি (যা আমি আমার প্রকল্পে ইনস্টল করেছি) থেকে এসেছেন ।

Comments

আমার জন্য কাজ করে, খুব ভাল রেলপথ সমাধান। ধন্যবাদ @ ইয়্যারিন

— মিং

হ্যাঁ! দেয়ালে মাথা ঠেকানোর কয়েক ঘন্টা পরে, আপনার "সম্পদ-পথ" সমাধানটি আমার .css.scss ফাইলটিতে অবশেষে আমার জন্য কাজ করেছে! background-image: url(asset-path('off.png'))

— রেইমন্ড গান

Answer 3

রেল 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");

Comments

@ মাইকলাইনস: এটি কেবলমাত্র একটি নতুন রেল ৪.১ প্রকল্পে পরীক্ষা করে হেরোকুতে মোতায়েন করা হয়েছে এবং এটি আমার পক্ষে ভাল কাজ করছে। আপনি অবশ্যই কিছু স্পর্শ করেছেন production.rb।

— সার্গের্গ

Answer 4

হ্যাশটি হ'ল সম্পদ পাইপলাইন এবং সার্ভারটি ক্যাচিং অপ্টিমাইজ করে http://guides.rubyonrails.org/asset_piplines.html

এরকম কিছু চেষ্টা করুন:

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

গুডলাক

Comments

আমার জন্য কাজ! ধন্যবাদ :)

— ড্যানিয়েল

আপনার ক্ষেত্রে ফাইল এক্সটেনশনটি কী হওয়া উচিত? শুধু .cssআমার জন্য কাজ হয়নি।

— অরূপ রক্ষিত

আমার জন্য কাজ! ধন্যবাদ ভাই!

— আলেজান্দ্রোজেএসআর

Answer 5

সিএসএসে

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

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

Comments

প্লেইন ওল সিএসএস ব্যবহার করে, আমি ভেবেছিলাম আমি উন্মাদ হয়ে যাচ্ছি - ধন্যবাদ!

— ক্রেগ ম্যাকগফ

এটি উত্পাদনে সংকলিত হবে না

— dimitry_n

বাহ, আপনাকে ধন্যবাদ, এটি খুব স্বজ্ঞাত নয়। তাই আমি সম্পদ মার্গে সকল সম্পদ অনুমান ( vendor/assets, app/assets, lib/assets, ইত্যাদি) একটি একক সম্পদের মধ্যে চিত্তাকর্ষক পর মিলিত পেতে ফোল্ডার সম্পূর্ণ হলে?

— ওহহ

এটি প্রোডাকশনে কাজ করবে না কারণ প্রোডাকশনে আপনার সম্পদগুলি একটি এমডি 5 হ্যাশ নামের শেষে সংযুক্ত হয়ে সংকলিত হয়ে যায় এবং সাধারণ সেটিংস সহ, /assets/banner.jpgকাজ করবে না। পরিবর্তে এটি কিছু হবে /assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg। টিএল; ডিআর এটি ব্যবহার করবেন না।

— জোশুয়া পিন্টার

Answer 6

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

২.৩.১ সিএসএস এবং ইআরবি

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

.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' %>) }

এটি সিএসএস উত্সে সঠিকভাবে ফর্ম্যাট করা ডেটা ইউআরআই .োকায়।

নোট করুন যে সমাপ্তি ট্যাগটি স্টাইল -%> এর হতে পারে না।

Answer 7

কেবল এই স্নিপেটটি আমার পক্ষে কাজ করে না:

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

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

Answer 8

রিয়েল ডকুমেন্টগুলি উল্লেখ করে আমরা দেখতে পাই যে CSS থেকে চিত্রগুলিতে লিঙ্ক করার কয়েকটি উপায় রয়েছে। শুধু বিভাগ 2.3.2 যান।

প্রথমে নিশ্চিত করুন যে এটি কোনও স্যাস ফাইল হলে আপনার সিএসএস ফাইলের .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"

Answer 9

আমি এইটির সাথে চূড়ান্তভাবে ঘন্টার পর ঘন্টা কী পাই:

কাজগুলি:

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

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

উপরোক্ত ফলাফলগুলির মতো কিছু: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

লক্ষ্য করুন নেতৃস্থানীয় "/" , এবং এটা কোট মধ্যে এর । আপনার স্টাইলশীট সিএসএসএসএসএস- এ স্ক্যাস এক্সটেনশান এবং চিত্র_পথ সাহায্যকারী নোট করুন । চিত্রটি অ্যাপ / সম্পদ / চিত্র ডিরেক্টরিতে রয়েছে ।

কাজ করে না:

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

কাজ করে না, অবৈধ সম্পত্তি:

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

আমার সর্বশেষ অবলম্বনটি সেগুলি হতে আমার পাবলিক এস 3 বালতিতে রাখা এবং লোড করা হতে চলেছিল, তবে অবশেষে কিছু একটা হয়ে গেছে।

Comments

এখানে আসার এবং এখনও যে কোনও সমস্যার জন্য: আপনার সিএসএস ফাইল আপডেট হয়েছে এবং স্থানীয়ভাবে আপনার সম্পদ প্রাক-কম্পাইল করা হয়নি এবং সেগুলি আপডেট করার কথা ভুলে গেছেন তা নিশ্চিত করুন।

— হার্টভিগ

হার্টভিগ - এর অর্থ কী? আপনি কি বোঝাতে চেয়েছেন যে এই পদ্ধতিটি কাজ করার আগে আপনাকে আবার প্রাকম্পাইল চালাতে হবে? আমি এই পোস্টে (সমস্ত কিছু) প্রস্তাবিত সবকিছু চেষ্টা করেছি এবং কিছুই আমার পক্ষে কাজ করছে না

— মেল

Answer 10

মজার বিষয় হল, আমি যদি 'ব্যাকগ্রাউন্ড-ইমেজ' ব্যবহার করি তবে এটি কাজ করে না:

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

তবে কেবল 'ব্যাকগ্রাউন্ড', এটি করে:

background: url('picture.png');

Comments

তবে এটি কেবল এসএসএস ফাইল থেকে কাজ করে, যখন কোনও ডিভের মধ্যে স্টাইল সম্পত্তি নির্ধারণের সময় স্থাপন করা হয় না ... আমি বিভ্রান্ত হয়

— অ্যান্ডারসন

Answer 11

কিছু ক্ষেত্রে নিম্নলিখিতগুলি আরও কার্যকর হতে পারে

লোগো {ব্যাকগ্রাউন্ড: ইউআরএল (<% = সম্পদ_ডাটা_রি 'লোগো.পং'%>)}

সূত্র: http://guides.rubyonrails.org/asset_pipline.html

Answer 12

রেল 5, বুটস্ট্র্যাপ 4-এ রত্ন 'সাস-রেল' ব্যবহার করার সময়, নিম্নলিখিতটি আমার জন্য কাজ করেছিল,

এসএসএস ফাইলে:

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

ফাইলটিতে (যেমন। html.slim):

    style=("background-image: url(#{ show_image_path("event_background.png") })");

Answer 13

এটি আপনাকে প্রতি একক সময় সেখানে পাওয়া উচিত।

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

Answer 14

ডিফল্টরূপে রেলস 4 আপনার সম্পদ পরিবেশন করবে না। এই কার্যকারিতা সক্ষম করতে আপনাকে কনফিগারেশন / অ্যাপ্লিকেশন.আরবিতে যেতে হবে এবং এই লাইনটি যুক্ত করতে হবে:

config.serve_static_assets = true

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

Comments

এটি কাজ করে, তবে কী সম্পদগুলি পূর্ববর্তী করার সুবিধাগুলি পূর্বাবস্থায় ফিরে আসবে না?

— আর্কিলে

Answer 15

4 রেলগুলিতে, কেবল ব্যবহার করুন

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

আপনার স্টাইল.এসএস ফাইলে যতক্ষণ পটভূমি চিত্রটি অ্যাপ / সম্পদ / চিত্রগুলিতে টিক থাকে।

Comments

পূর্ণ প্রশ্ন পড়ুন

— অ্যাড্রিয়ানো রিসেন্ডে

Answer 16

আপনি আপনার সিএসএস .erb এক্সটেনশনে যোগ করতে পারেন। এজ: স্টাইল.সিএস.বার্ব

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

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

Answer 17

এটি আমার পক্ষে কাজ করেছে:

background: #4C2516 url('imagename.png') repeat-y 0 0;