web-dev-qa-db-ja.com

Rails 4内でCSSの画像を参照する方法

HerokuのRails 4には奇妙な問題があります。画像がコンパイルされると、ハッシュが追加されますが、CSS内からこれらのファイルへの参照に正しい名前が調整されていません。これが私の言っていることです。 logo.pngというファイルがあります。それが英雄的に現れるとき、それはそれとして見られます：

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

しかしCSSはまだ述べています：

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

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

ruby-on-railsherokuruby-on-rails-4
196
Nick ONeill

Sassと一緒のスプロケットには 気の利いたヘルパー がいくつかあります。スタイルシートのファイル拡張子が.css.scssまたは.css.sassの場合、スプロケットはonlyでこれらのヘルパーを処理します。

画像固有のヘルパー：

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")
375
zeeraw

理由はわかりませんが、私にとってうまくいったのは asset_path の代わりにof image_pathを使用することだけでした。 、私の画像は assets/images /ディレクトリの下にありますが：

例：

app/assets/images/mypic.png

Rubyの場合：

asset_path('mypic.png')

.scss：

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

アップデート：

これらのアセットヘルパーは sass-Rails gem（私が自分のプロジェクトにインストールしたもの）から来ていることがわかりました。

55
Yarin

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");
35
sergserg

ハッシュは、アセットパイプラインとサーバーがキャッシュを最適化するためのものです http://guides.rubyonrails.org/asset_pipeline.html

このようなことを試してください：

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

がんばろう

25
Mauro Dias

CSSで

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

元のパスは/assets/images/banner.jpgですが、慣例ではurlメソッドに/ assets /を追加するだけです

11
user2458192

私が.css.erb拡張子を持っているとき、どのように参照するかimages。私にとってはプロダクションと開発の両方で働いていました。

2.3.1 CSSとERB

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

.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ソースに挿入されます。

終了タグのスタイルは - ％>にはできません。

10
Arup Rakshit

このスニペットだけが私にはうまくいきません。

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

しかし、stylename.scssをstylename.css.scssに変更すると役に立ちます。

5
s.vatagin

Railsドキュメント を参照すると、cssから画像にリンクする方法がいくつかあることがわかります。セクション2.3.2に進んでください。

最初に、あなたのcssファイルがsassファイルである場合、あなたのcssファイルが.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"
4
Nick Res

私はこれでMUCKINGの時間後に発見したもの：

仕事：

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バケットに入れてそこからロードすることでしたが、ようやく何かが起こりました。

3
Danny

面白いことに、私が 'background-image'を使ったとしても、うまくいきません。

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

しかし、単に「バックグラウンド」です。

background: url('picture.png');
1
AnderSon

いくつかのケースでは、以下のものも適用できます。

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

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

1
Stephane Paquet

あなたのcss .erb拡張子に追加することができます。 Ej：style.css.erb

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

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

これは毎回あなたをそこに連れて行くべきです。

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

Rails 4では、単純に

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

0
boussac

Gem '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") })");
0
Mehreen

デフォルトではRails 4はあなたのアセットを扱いません。この機能を有効にするには、config/application.rbを開いて次の行を追加する必要があります。

config.serve_static_assets = true

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

0
ksiomelo

これは私のために働いた：

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