Có một vấn đề kỳ lạ với Rails 4 trên Heroku. Khi hình ảnh được biên dịch, chúng có các giá trị băm được thêm vào chúng, nhưng tham chiếu đến các tệp trong CSS không có tên thích hợp được điều chỉnh. Ý tôi là đây. Tôi có một tập tin gọi là logo.png. Tuy nhiên, khi nó xuất hiện trên heroku, nó được xem là:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Tuy nhiên, CSS vẫn nêu:

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

Kết quả: hình ảnh không hiển thị. Có ai chạy vào đây không? Vấn đề đó được giải quyết như thế nào?

Sprockets cùng với Sass có một số trợ giúp tiện lợi mà bạn có thể sử dụng để hoàn thành công việc. Sprockets sẽ chỉ xử lý các trình trợ giúp này nếu phần mở rộng tệp biểu định kiểu của bạn là .css.scsshoặc .css.sass.

Người trợ giúp cụ thể về hình ảnh:

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

Người trợ giúp bất khả tri:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

Hoặc nếu bạn muốn nhúng dữ liệu hình ảnh vào tệp css:

background-image: asset-data-url("logo.png")

Không biết tại sao, nhưng chỉ điều đó làm việc cho tôi là sử dụng asset_path thay vì của IMAGE_PATH , mặc dù hình ảnh của tôi đang được các tài sản / images / thư mục:

Thí dụ:

app/assets/images/mypic.png

Trong Ruby:

asset_path('mypic.png')

Trong .scss:

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

CẬP NHẬT:

Hình ra nó - hóa ra những người trợ giúp tài sản này đến từ đá quý sass-rails (mà tôi đã cài đặt trong dự án của mình).

Trong Rails 4, bạn có thể tham chiếu một hình ảnh nằm trong tệp assets/images/của mình .SCSSmột cách dễ dàng như thế này:

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

Khi bạn khởi chạy ứng dụng ở chế độ phát triển ( localhost:3000), bạn sẽ thấy một cái gì đó như:

background-image: url("/assets/pretty-background-image.jpg");

Trong chế độ sản xuất, tài sản của bạn sẽ có số người trợ giúp bộ đệm:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

Băm là do đường ống tài sản và máy chủ Tối ưu hóa bộ nhớ đệm http://guides.rubyonrails.org/asset_pipeline.html

Hãy thử một cái gì đó như thế này:

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

Chúc may mắn

Trong css

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

mặc dù đường dẫn ban đầu là /assets/images/banner.jpg, theo quy ước, bạn phải thêm chỉ / nội dung / trong phương thức url

Không có câu trả lời nào nói về cách thức, khi tôi có .css.erbtiện ích mở rộng, cách tham chiếu hình ảnh . Đối với tôi làm việc cả trong sản xuất và phát triển là:

2.3.1 CSS và ERB

Đường ống tài sản tự động đánh giá ERB . Điều này có nghĩa là nếu bạn thêm tiện ích mở rộng erb vào tài sản CSS (ví dụ application.css.erb:), thì những người trợ giúp nhưasset_path có sẵn trong quy tắc CSS của bạn:

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

Điều này viết đường dẫn đến tài sản cụ thể được tham chiếu. Trong ví dụ này, sẽ có ý nghĩa khi có một hình ảnh trong một trong các đường dẫn tải tài sản, chẳng hạn nhưapp/assets/images/image.png , sẽ được tham chiếu ở đây. Nếu hình ảnh này đã có sẵn public/assetsdưới dạng tệp dấu vân tay, thì đường dẫn đó được tham chiếu.

Nếu bạn muốn sử dụng URI dữ liệu - phương pháp nhúng dữ liệu hình ảnh trực tiếp vào tệp CSS - bạn có thể sử dụngasset_data_uri trợ giúp.

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

Điều này sẽ chèn một URI dữ liệu được định dạng chính xác vào nguồn CSS.

Lưu ý rằng thẻ đóng không thể có kiểu -%>.

Chỉ đoạn này không làm việc cho tôi:

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

Nhưng đổi tên stylename.scss thành stylename.css.scss giúp tôi.

Tham khảo tài liệu Rails chúng tôi thấy rằng có một vài cách để liên kết đến hình ảnh từ css. Chỉ cần đi đến phần 2.3.2.

Trước tiên, hãy đảm bảo tệp css của bạn có phần mở rộng .scss nếu đó là tệp sass.

Tiếp theo, bạn có thể sử dụng phương pháp ruby, điều này thực sự xấu xí:

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

Hoặc bạn có thể sử dụng mẫu cụ thể đẹp hơn:

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

Cuối cùng, bạn có thể sử dụng mẫu chung:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

NHỮNG GÌ TÔI ĐÃ TÌM KIẾM SAU GIỜ MANG LẠI VỚI NÀY:

LÀM :

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

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

Các kết quả trên giống như: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Lưu ý "/" hàng đầu , và nó nằm trong dấu ngoặc kép . Cũng lưu ý phần mở rộng scss và trình trợ giúp image_path trong yourstylesheet.css.scss. Hình ảnh nằm trong thư mục ứng dụng / tài sản / hình ảnh .

Không hoạt động:

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

không hoạt động, tài sản không hợp lệ:

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

Phương án cuối cùng của tôi là đặt những thứ này vào thùng s3 công cộng của tôi và tải từ đó, nhưng cuối cùng cũng có thứ gì đó sẽ xảy ra.

Thật thú vị, nếu tôi sử dụng 'ảnh nền', nó không hoạt động:

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

Nhưng chỉ là 'nền', nó có:

background: url('picture.png');

Trong một số trường hợp sau đây cũng có thể là applier

logo {nền: url (<% = property_data_uri 'logo.png'%>)}

Nguồn: http://guides.rubyonrails.org/asset_pipeline.html

Khi sử dụng gem 'sass-rails', trong Rails 5, bootstrap 4, cách sau đây có hiệu quả với tôi,

trong tệp .scss:

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

trong tệp xem (ví dụ: .html.slim):

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

Điều này sẽ đưa bạn đến đó mỗi lần.

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

Theo mặc định, Rails 4 sẽ không phục vụ tài sản của bạn. Để kích hoạt chức năng này, bạn cần vào config / application.rb và thêm dòng này:

config.serve_static_assets = true

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

Trong Rails 4, chỉ cần sử dụng

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

Bạn có thể thêm vào phần mở rộng css .erb của bạn. Ej: style.css.erb

Sau đó, bạn có thể đặt:

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

Điều này làm việc cho tôi:

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