HerokuのRails 4に奇妙な問題があります。画像をコンパイルすると、画像にハッシュが追加されますが、CSS内からのこれらのファイルへの参照では、適切な名前が調整されていません。これが私の意味です。logo.pngというファイルがあります。しかし、それがherokuに表示されると、次のように表示されます。

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

ただし、CSSは次のように述べています。

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

結果：画像は表示されません。誰かがこれに遭遇しましたか？これをどのように解決できますか？

Sassと一緒の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")

なぜ分からないのですが、私のために働いていた唯一のものは使用していたasset_pathを 代わりのIMAGE_PATH私のイメージは下にあるにもかかわらず、資産/画像/ディレクトリ：

例：

app/assets/images/mypic.png

Rubyの場合：

asset_path('mypic.png')

.scss：

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

更新：

これらのアセットヘルパーはsass-rails gem（プロジェクトにインストールしたもの）からのものであることがわかりました。

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メソッドに/ assets /だけを追加する必要があります

答えはどれも、私が.css.erb拡張機能を持つとき、画像を参照する方法について述べていません。私にとって生産と開発の両方で働いた：

2.3.1 CSSとERB

アセットパイプラインは自動的にERBを評価します。つまり、CSSアセットにerb拡張機能を追加すると（たとえば、application.css.erb）、asset_pathCSSルールで次のようなヘルパーを使用できます。

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

これは、参照されている特定のアセットへのパスを書き込みます。この例では、app/assets/images/image.pngここで参照されるのようなアセットロードパスの1つに画像を配置することは理にかなっています。このイメージがpublic/assetsフィンガープリントファイルとしてすでに使用可能な場合は、そのパスが参照されます。

データ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ファイルがsassファイルの場合は、拡張子が.scssであることを確認してください。

次に、本当に醜い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"

これを何時間もいじった後に私が見つけたもの：

WORKS：

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

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

上記は次のようなものを出力します： "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

注意してください先頭の「/」、そしてそれは引用符で囲まです。yourstylesheet.css.scssのscss拡張子とimage_pathヘルパーにも注意してください。画像はapp / assets / imagesディレクトリにあります。

動作しません：

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');

場合によっては、以下も適用できます

ロゴ{背景：url（<％= asset_data_uri 'logo.png'％>）}

出典：http : //guides.rubyonrails.org/asset_pipeline.html

gem 'sass-rails'を使用する場合、Rails 5、ブートストラップ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拡張子に追加できます。Ej：style.css.erb

それからあなたは置くことができます：

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

これは私のために働きました：

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