Rails 3.1 และ Image Image

156

ฉันใส่รูปภาพทั้งหมดของฉันสำหรับธีมผู้ดูแลระบบของฉันในโฟลเดอร์ทรัพย์สินภายในโฟลเดอร์ชื่อ admin จากนั้นฉันจะเชื่อมโยงกับมันเหมือนปกติคือ

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

FYI เพียงเพื่อการทดสอบฉันไม่ได้ใช้แท็ก asset_path เพียงเพราะฉันยังไม่ได้รวบรวมเนื้อหาของฉัน

โอเคดีจนกระทั่งฉันตัดสินใจอัปเดตรูปภาพ ฉันเปลี่ยนสีบางส่วน แต่เมื่อทำการโหลดภาพสไตล์ใหม่จะไม่แสดง หากฉันดูภาพโดยตรงในเบราว์เซอร์มันยังคงแสดงภาพเก่า ไปอีกขั้นหนึ่งฉันทำลายโฟลเดอร์ภาพผู้ดูแลระบบ แต่มันก็ไม่มีอะไรแตกสลายภาพทั้งหมดยังคงแสดงอยู่ และใช่ฉันได้ล้างแคชและได้ลองกับเบราว์เซอร์หลายตัว

มีการจัดรูปแบบแคชบางอย่างเกิดขึ้นหรือไม่ นี่เป็นเพียงการพัฒนาท้องถิ่นโดยใช้ธารเพื่อให้บริการหน้าเว็บ

แม้แต่การทำลายโฟลเดอร์รูปภาพทั้งหมด แต่รูปภาพก็ยังคงแสดงอยู่

ฉันพลาดอะไรไปรึเปล่า?

ruby-on-rails ruby-on-rails-3

— ที่กำบัง
แหล่งที่มา

2

ไม่ใช่ในกรณีที่ใช้ 3.1 โดยใช้ไพพ์ไลน์ของสินทรัพย์ คุณจะใช้สินทรัพย์คำสั่ง rake: คอมไพล์ล่วงหน้าซึ่งจะบีบอัดไฟล์เหล่านั้นและย้ายไฟล์เหล่านั้นไปยังไฟล์สาธารณะ

— Lee

2

ย้ายพวกเขาไปยังโฟลเดอร์สาธารณะได้ดีทุกอย่างแปลกไปเมื่อทำงานได้ดีจากโฟลเดอร์ทรัพย์สิน อาจต้องรอเอกสารเพิ่มเติมใน 3.1

— Lee

3

ฉันเข้าใจความคับข้องใจของคุณ เห็นได้ชัดว่าการเปิดตัวผู้สมัครไม่ได้รับการบันทึกไว้อย่างดี

— tybro0103

1

ทิ้งไว้ในสินทรัพย์เพียง แต่ไม่รวมเส้นทางโฟลเดอร์เลย ดูคำตอบของฉันด้านล่าง

— Andrew

226

ใน 3.1 คุณเพียงกำจัดส่วน 'images' ของ path ดังนั้นภาพที่มีชีวิตอยู่/assets/images/example.pngจะเข้าถึงได้ในคำขอที่ URL นี้ -/assets/example.png

เนื่องจากassets/imagesโฟลเดอร์ได้รับการสร้างขึ้นพร้อมกับแอป 3.1 ใหม่นี่คือการประชุมที่พวกเขาอาจต้องการให้คุณติดตาม ฉันคิดว่านั่นคือสิ่งที่image_tagจะมองหา แต่ฉันยังไม่ได้ทดสอบ

นอกจากนี้ในระหว่างการปราศรัย RailsConf ผมจำได้ว่า D2h บอกว่าpublic folderไม่ควรมีอะไรมากมายอีกต่อไปส่วนใหญ่เป็นเพียงหน้าข้อผิดพลาดและ favicon

— Lee McAlilly
แหล่งที่มา

ใช่ฉันได้เล่นกับ allot นี้และพวกเขามีวิธีที่จะทำให้มันง่ายขึ้น ใช่การวางไว้ในโฟลเดอร์ทรัพย์สินของฉันใช้งานได้ แต่จากนั้นคุณสามารถใช้ป้ายทรัพยากร ดังนั้นฉันรอเพื่อดูว่ามีข้อมูลเพิ่มเติมออกมาอีก

— ลี

1

ขอบคุณช่วยฉันด้วยเหมือนกัน นี่คือสิ่งที่ทำให้ฉันคลั่งไคล้ในฐานะเพื่อนพยายามเรียนรู้ Rails ที่มาจากกรอบการพัฒนาเว็บอื่น ๆ

— jn29098

6

และจะเกิดอะไรขึ้นหากสองโฟลเดอร์ที่แตกต่างกันมีชื่อไฟล์เหมือนกัน

— Hady Elsahar

6

ไม่ควรเป็น DH2 ใช่ไหม

— Tiago Franco

1

ไม่แน่ใจว่าทำไมพวกเขาต้องเปลี่ยนบางสิ่งที่ได้ผลอยู่แล้ว

— Tastybrownies

98

คุณจะต้องการเปลี่ยนนามสกุลของไฟล์ css จาก.css.scssเป็น.css.scss.erbและทำ:

background-image:url(<%=asset_path "admin/logo.png"%>);

คุณอาจต้องทำการ "รีเฟรชอย่างหนัก" เพื่อดูการเปลี่ยนแปลง CMD + SHIFT + R บนเบราว์เซอร์ OSX

ในการผลิตตรวจสอบให้แน่ใจ

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

เกิดขึ้นเมื่อมีการใช้งาน

— tybro0103
แหล่งที่มา

44

มีผู้ช่วยรูปภาพใหม่ใน sass: image_url, image_path, ... สามารถพบได้ที่นี่: edgeguides.rubyonrails.org/asset_pipeline.html ไม่จำเป็นต้องใช้ erb เป็น preprocessor อีกต่อไป

— Martin Wawrusch

1

ฉันลองใช้ตัวช่วยเหลือ sass-rails (image_url และ image-url) เป็นไฟล์ css.scss แต่ดูเหมือนว่าจะไม่ถูกตีความ เบาะแสใด ๆ

— Invaino

2

ไฟล์ scss ที่สร้างขึ้นมีชื่อว่า. css.scss ตามค่าเริ่มต้นยังไม่มีการกระเด็นของเตียงเกิดขึ้นเลย

— Adrian Macneil

2

ด้วยเหตุผลบางอย่างรูปภาพ-URL ไม่ทำงานสำหรับฉัน แต่ asset-url ('myimage.png', รูปภาพ) ทำงานได้อย่างสมบูรณ์ (ราง 3.1)

— Elad

1

ในกรณีที่ใครก็ตามที่อัพเกรดจาก 3.0 สงสัยคุณสามารถเปลี่ยนสไตล์ชีทของคุณเป็น.cssเป็น.css.erb(หลังจากที่คุณย้ายพวกเขาไปสู่app/assetsการประมวลผลแบบ erb โดยไม่ต้องใช้ซิสต์)

— William Denniss

22

สำหรับสิ่งที่คุ้มค่าเมื่อฉันทำสิ่งนี้ฉันพบว่าไม่ควรรวมโฟลเดอร์ไว้ในพา ธ ในไฟล์ css เช่นถ้าฉันมีapp/assets/images/example.pngและฉันวางไว้ในไฟล์ css ของฉัน ...

div.example { background: url('example.png'); }

... จากนั้นก็ใช้งานได้อย่างน่าอัศจรรย์ ฉันคิดนี้ออกโดยการเรียกใช้งานที่เพิ่งดูดทุกอย่างออกจากเส้นทางโหลดทั้งหมดของคุณและทิ้งไว้ในโฟลเดอร์ลิ้นชักขยะ:rake assets:precompile public/assetsนั่นคือแดกดัน IMO ...

ในกรณีนี้หมายความว่าคุณไม่จำเป็นต้องใส่พา ธ ของโฟลเดอร์ทุกสิ่งในโฟลเดอร์สินทรัพย์ของคุณจะจบลงด้วยการอยู่ในไดเรกทอรีขนาดใหญ่ วิธีที่ระบบนี้แก้ไขข้อขัดแย้งของชื่อไฟล์ไม่ชัดเจนคุณอาจต้องระมัดระวังเกี่ยวกับสิ่งนั้น

ชนิดที่น่าผิดหวังมีเอกสารไม่ดีออกมีสำหรับการเปลี่ยนแปลงครั้งใหญ่นี้

— แอนดรู
แหล่งที่มา

3

เมื่อมีข้อขัดแย้งในการตั้งชื่อพา ธ แรกที่ปรากฏในอาร์เรย์ config.assets.paths คือไฟล์ที่ถูกเลือก สิ่งนี้สามารถหลีกเลี่ยงได้โดยการใช้ตัวasset_path()ช่วยและระบุไดเรกทอรี

— Joseph Ravenwolfe

6

"ใช้งานได้อย่างน่าอัศจรรย์" เนื่องจากไฟล์ css และรูปภาพอยู่ในตำแหน่งเดียวกัน การอ้างอิงไฟล์ CSS สัมพันธ์กับตำแหน่งของไฟล์ css

— Bill Leeper

ไปป์ไลน์ของทรัพย์สินอาจเป็นกล่องดำเล็กน้อยโดยเฉพาะอย่างยิ่งสำหรับนักพัฒนาส่วนหน้า แต่มันมีคุณสมบัติที่ยอดเยี่ยมมากมายเช่นไม่ต้องกังวลเกี่ยวกับเส้นทางของไฟล์และการแคชอัตโนมัติ

— ไมล์

16

ใน Rails 4 ตอนนี้คุณสามารถใช้ css และ sass helper image-url:

div.logo {background-image: image-url("logo.png");}

หากภาพพื้นหลังของคุณไม่ปรากฏขึ้นให้พิจารณาดูว่าคุณอ้างอิงถึงพวกเขาในสไตล์ชีทของคุณอย่างไร

— lflores
แหล่งที่มา

1

สิ่งนี้ถูกต้อง (สำหรับทางรถไฟ 4) โหวตคำตอบนี้!

— ahnbizcad

Rails 'ช่วยคุณได้' โดยใส่คำค้นหา url และสตริงลงไป ซึ่งหมายความว่าคุณสามารถทำสิ่งต่าง ๆ เช่น div.logo {background: image-url("logo.png") no-repeat center;}

— Antony Denyer

10

เมื่ออ้างอิงภาพใน CSS หรือในแท็ก IMG ให้ใช้ image-name.jpg

ในขณะที่ภาพอยู่ใต้. / assets/images/image-name.jpg

— Tilo
แหล่งที่มา

ฉันคิดว่านี่เป็นสิ่งที่ผิดเมื่อพูดถึง CSS - การใช้ rails 3.1.0.rc4 เมื่อฉันใช้background: url('sort_asc_disabled.png')มันทำงานได้กับแอพไฟล์ / asset / images / sort_asc_disabled.png

— wonderfulthunk

2

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

สแครชคาสต์นี้ (วิดีโอแนะนำการใช้งาน Rails เกี่ยวกับการวางท่อสินทรัพย์) ช่วยอธิบายเส้นทางในท่อส่งทรัพย์สินได้เป็นอย่างดี ฉันพบว่ามันมีประโยชน์มากและดูมันสองสามครั้ง

ทางออกที่ฉันเลือกคือ @Lee McAlilly ด้านบน แต่รถไฟนี้ช่วยให้ฉันเข้าใจว่าทำไมมันถึงใช้งานได้ หวังว่ามันจะช่วย!

— botbot
แหล่งที่มา

0

ท่อส่งทรัพย์สินในรางเสนอวิธีการสำหรับสิ่งที่แน่นอนนี้

คุณเพียงแค่เพิ่ม image_path ('ชื่อไฟล์ภาพ') ลงในไฟล์ css หรือ scss และทางรถไฟจะดูแลทุกอย่าง ตัวอย่างเช่น:

.logo{ background:url(image_path('admin/logo.png'));

(โปรดทราบว่ามันใช้งานได้เหมือนในมุมมอง. erb และคุณไม่ได้ใช้ "/ asset" หรือ "/ assets / images" ในพา ธ )

Rails ยังเสนอวิธีการช่วยเหลืออื่น ๆ และยังมีคำตอบอื่นอีกที่นี่: ฉันจะใช้รูปภาพอ้างอิงใน Sass เมื่อใช้ Rails 3.1 ได้อย่างไร

— benrugg
แหล่งที่มา

ฉันรู้ว่าคำถามนี้มีอายุสองสามปี แต่นี่เป็นหน้าแรกที่ฉันพบบน google เมื่อค้นหาสิ่งนี้ดังนั้นจึงเป็นเรื่องดีที่จะเลือกคำตอบเพื่อให้ผู้อื่นสามารถอ้างอิงได้ง่าย!

— benrugg