Rails hình ảnh và tài sản không được nạp đúng

Question

Ví dụ, trong ứng dụng Rails của tôi, tôi có một cái gì đó như:

.wax_seal { 
    background: url("wax-seal-small.png"); 
    display: block; 
    height: 100px; 
    margin: 0 auto; 
    width: 92px; 
} 

.wax_seal:active { 
    background: url('wax-seal-small-broken.png'); 
} 

Và trong tập tin config/environments/production.rb tôi:

# Disable Rails's static asset server (Apache or nginx will already do this). 
config.serve_static_assets = true 

tôi tự gọi biên dịch tài sản :

bundle exec rake assets:precompile 

Và các tệp được tạo bằng băm ở cuối tên:

wax-seal-small-Uuhqwduhqwdoi234983jewf.png 

---

Vì vậy, điều này không làm việc:

background: url("wax-seal-small.png"); 

Nhưng điều này hoạt động tốt (khi tôi tay loại nó trong Chrome):

background: url("wax-seal-small-Uuhqwduhqwdoi234983jewf.png"); 

---

Tôi đang bỏ lỡ bước nào? Làm thế nào tôi có thể làm cho các quy tắc CSS của tôi thêm vào băm nhỏ đó?

Thêm config.assets.compile = true vào config/environments/production.rb làm cho nó hoạt động, nhưng tôi đọc trong hướng dẫn Rails rằng đó là một thực tế xấu do số lần truy cập hiệu suất đáng kể.

Answer 1

Tôi thấy điều này trong edgerails tài liệu: http://edgeguides.rubyonrails.org/asset_pipeline.html#css-and-sass

2.3.2 CSS và Sass

Khi sử dụng các đường ống dẫn tài sản, đường dẫn đến tài sản phải được viết lại và sass-ray cung cấp -URL và những người trợ giúp -path (được gạch nối trong Sass, nhấn mạnh trong Ruby) cho các lớp nội dung sau: hình ảnh, phông chữ, video, âm thanh, JavaScript và biểu định kiểu.

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

Các hình thức chung chung hơn cũng có thể được sử dụng nhưng con đường tài sản và lớp cả phải được xác định:

• asset-url("rails.png", image) becomes url(/assets/rails.png)
• asset-path("rails.png", image) becomes "/assets/rails.png"

Answer 2

Nếu bạn đang sử dụng sass hoặc ít hơn bạn có thể sử dụng background: image-url("wax-seal-small.png");

Điều đó sẽ thêm vào trước đường dẫn đến tập tin của bạn và thêm các hash xuất bộ nhớ cache.

Nếu không, hãy tham chiếu đến thư mục/asset. Ví dụ. background: url("/assets/wax-seal-small.png");