มีปัญหาแปลก ๆ กับ Rails 4 ใน Heroku เมื่อมีการคอมไพล์รูปภาพพวกมันจะเพิ่มแฮชเข้าไป แต่การอ้างอิงไปยังไฟล์เหล่านั้นจากใน CSS นั้นไม่มีการปรับชื่อที่เหมาะสม นี่คือสิ่งที่ฉันหมายถึง ฉันมีไฟล์ชื่อ logo.png แต่เมื่อมันปรากฏบน heroku มันถูกมองว่าเป็น:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

อย่างไรก็ตาม CSS ยังคงระบุ:

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

ผลลัพธ์: รูปภาพไม่แสดง มีใครเจอเรื่องนี้บ้างไหม? วิธีนี้สามารถแก้ไขได้?

เฟืองกับ Sass มีผู้ช่วยที่ดีที่คุณสามารถใช้ในการทำงานให้เสร็จ เฟืองจะเพียงดำเนินการผู้ช่วยเหลือเหล่านี้ถ้านามสกุลไฟล์สไตล์ชีตของคุณอย่างใดอย่างหนึ่งหรือ.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")

ไม่ทราบว่าทำไม แต่สิ่งเดียวที่ทำงานสำหรับฉันคือการใช้asset_path แทนของimage_pathแม้ว่าภาพของฉันอยู่ภายใต้สินทรัพย์ / images /ไดเรกทอรี:

ตัวอย่าง:

app/assets/images/mypic.png

ในทับทิม:

asset_path('mypic.png')

ใน. scss:

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

UPDATE:

คิดว่ามันกลายเป็นว่าผู้ช่วยสินทรัพย์เหล่านี้มาจากอัญมณีsass-rails (ซึ่งฉันได้ติดตั้งในโครงการของฉัน)

ใน 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");

แฮชเป็นเพราะไปป์ไลน์สินทรัพย์และเซิร์ฟเวอร์เพิ่มประสิทธิภาพการแคช http://guides.rubyonrails.org/asset_pipeline.html

ลองสิ่งนี้:

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

โชคดี

ใน css

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

แม้ว่าเส้นทางเดิมคือ /assets/images/banner.jpg โดยการประชุมคุณต้องเพิ่มเพียงทรัพย์สิน / ในวิธีการ URL

ไม่มีคำตอบที่กล่าวเกี่ยวกับวิธีการที่เมื่อฉันจะต้อง.css.erbขยายวิธีการอ้างอิงภาพ สำหรับฉันทำงานทั้งในการผลิตและการพัฒนาเช่นกัน:

2.3.1 CSS และ ERB

ท่อสินทรัพย์ที่ประเมินโดยอัตโนมัติERB ซึ่งหมายความว่าหากคุณเพิ่มส่วนขยาย erb ลงในเนื้อหาCSS (ตัวอย่างเช่นapplication.css.erb) ผู้ช่วยเหลือที่asset_pathมีอยู่ในกฎ CSS ของคุณ:

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

สิ่งนี้เขียนเส้นทางไปยังเนื้อหาเฉพาะที่ถูกอ้างอิง ในตัวอย่างนี้มันจะทำให้รู้สึกถึงภาพในหนึ่งในเส้นทางการโหลดเนื้อหาเช่นapp/assets/images/image.pngซึ่งจะมีการอ้างอิงที่นี่ หากภาพนี้มีอยู่ในpublic/assetsไฟล์ลายนิ้วมือแล้วเส้นทางนั้นจะถูกอ้างอิง

หากคุณต้องการใช้ data URI ซึ่งเป็นวิธีการฝังข้อมูลภาพลงในไฟล์CSSโดยตรงคุณสามารถใช้asset_data_uriผู้ช่วยได้

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

สิ่งนี้แทรก URI ข้อมูลที่จัดรูปแบบอย่างถูกต้องลงในแหล่ง CSS

โปรดทราบว่าแท็กปิดไม่สามารถมีสไตล์ -%>

เฉพาะตัวอย่างนี้ไม่ได้สำหรับฉัน:

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

แต่เปลี่ยนชื่อstylename.scssเป็นstylename.css.scssช่วยฉันได้

อ้างอิงเอกสารRailsเราเห็นว่ามีวิธีการเชื่อมโยงไปยังภาพจาก css เพียงไปที่หัวข้อ 2.3.2

ก่อนอื่นตรวจสอบให้แน่ใจว่าไฟล์ css ของคุณมีนามสกุล. scss หากเป็นไฟล์ sass

ถัดไปคุณสามารถใช้วิธี ruby ​​ซึ่งน่าเกลียดจริง ๆ :

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

สิ่งที่ฉันได้พบหลังจากใช้เวลาหลายชั่วโมงกับสิ่งนี้:

ผลงาน:

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

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

ผลลัพธ์ข้างต้นเป็นดังนี้: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

สังเกตชั้นนำ "/"และมันเป็นคำพูดที่อยู่ใน นอกจากนี้ให้สังเกตนามสกุล scss และ image_path helperใน yourstylesheet.css.scss ภาพที่อยู่ในapp / สินทรัพย์ directory

ใช้งานไม่ได้:

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 สาธารณะของฉันและโหลดจากที่นั่น แต่ในที่สุดก็มีบางอย่างเกิดขึ้น

น่าสนใจถ้าฉันใช้ 'ภาพพื้นหลัง' มันไม่ทำงาน:

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

แต่เพียง 'พื้นหลัง' มันจะ:

background: url('picture.png');

ในบางกรณีสิ่งต่อไปนี้อาจเป็นค่าเริ่มต้น

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

ที่มา: http://guides.rubyonrails.org/asset_pipeline.html

เมื่อใช้ 'sass-rails' ใน Rails 5, bootstrap 4, สิ่งต่อไปนี้ใช้ได้สำหรับฉัน

ใน. scss ไฟล์:

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

ในไฟล์มุมมอง (เช่น. html.slim):

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

สิ่งนี้ควรพาคุณไปที่นั่นทุกครั้ง

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

ตามค่าเริ่มต้น Rails 4 จะไม่แสดงเนื้อหาของคุณ ในการเปิดใช้งานฟังก์ชั่นนี้คุณต้องเข้าไปที่ config / application.rb และเพิ่มบรรทัดนี้:

config.serve_static_assets = true

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

ใน Rails 4 เพียงใช้

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

คุณสามารถเพิ่มลงใน css .erb extension ได้ Ej: style.css.erb

จากนั้นคุณสามารถใส่:

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

สิ่งนี้ใช้ได้กับฉัน:

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