web-dev-qa-db-ja.com

Rails 3.1および画像アセット

Adminテーマのすべての画像を、adminというフォルダー内のassetフォルダーに入れました。次に、通常のようにリンクします。

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

参考までに。テストのためだけに、アセットをコンパイルしていないため、asset_pathタグ​​をまだ使用していません。

画像を更新することを決定するまで、これまでのところ問題ありません。一部の色を置き換えましたが、リロード時に新しいスタイルの画像が表示されません。ブラウザで画像を直接表示すると、まだ古い画像が表示されています。さらに一歩進んで、admin imagesフォルダーを破棄しました。しかし、すべての画像がまだ表示されているわけではありません。はい、キャッシュをクリアし、複数のブラウザーで試しました。

何らかの画像キャッシュが行われていますか？これは、ページを提供するためにpowを使用した単なるローカル開発です。

画像フォルダ全体を破壊しても、画像はまだ提供されています。

何か不足していますか？

ruby-on-railsruby-on-rails-3
156
Lee

3.1では、パスの「画像」部分を取り除くだけです。したがって、/assets/images/example.pngにあるイメージは、このURLのgetリクエストで実際にアクセスできます-/assets/example.png

assets/imagesフォルダーは新しい3.1アプリと共に生成されるため、これはおそらくあなたが従うことを望んでいる慣例です。 image_tagがそれを探す場所だと思いますが、まだテストしていません。

また、RailsConfの基調講演で、D_2hがpublic folderにもう多くはないはずだと言ったことを覚えています。ほとんどはエラーページとファビコンです。

226
Lee McAlilly

Cssファイルの拡張子を.css.scssから.css.scss.erbに変更して、次の操作を行います。

background-image:url(<%=asset_path "admin/logo.png"%>);

変更を確認するには、「ハードリフレッシュ」が必要になる場合があります。 OSXブラウザーではCMD + SHIFT + R。

本番では、必ず

rm -rf public/assets    
bundle exec rake assets:precompile Rails_ENV=production

展開時に発生します。

98
tybro0103

それが価値があることについては、私がこれを行ったとき、cssファイルのパスにフォルダを含めるべきではないことがわかりました。たとえば、app/assets/images/example.pngがあり、これをcssファイルに入れた場合...

div.example { background: url('example.png'); }

...それからどういうわけか魔法のように動作します。 rake assets:precompileタスクを実行することでこれを理解しました。このタスクは、すべてのロードパスからすべてを取り出し、ジャンクドロワーフォルダーpublic/assetsにダンプします。それは皮肉です、IMO ...

いずれにせよ、これは、フォルダーパスを配置する必要がないことを意味し、アセットフォルダー内のすべてがすべて1つの巨大なディレクトリに置かれます。このシステムがファイル名の競合をどのように解決するかは不明であるため、注意が必要な場合があります。

イライラするようなものがありますが、この大きな変更に対しては、これほど優れたドキュメントはありません。

22
Andrew

Rails 4では、cssおよびsassヘルパーのimage-urlを使用できるようになりました。

div.logo {background-image: image-url("logo.png");}

背景画像が表示されない場合は、スタイルシートでそれらをどのように参照しているかを検討してください。

16
lflores

cSSまたはIMGタグで画像を参照する場合は、image-name.jpgを使用します

画像は実際には./assets/images/image-name.jpgの下にあります

10
Tilo

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

このrailscast（アセットパイプラインに関するRailsチュートリアルビデオ）は、アセットパイプラインのパスを説明するのにも役立ちます。かなり便利だと感じ、実際に数回見ました。

私が選んだ解決策は、@ Lee McAlillyの上記のものですが、このrailscastは、なぜ機能するのかを理解するのに役立ちました。それが役に立てば幸い！

2
botbot

Railsのアセットパイプラインは、この正確な方法を提供します。

Cssまたはscssファイルにimage_path（ 'image filename'）を追加するだけで、Railsがすべてを処理します。例えば：

.logo{ background:url(image_path('admin/logo.png'));

（。erbビューと同じように機能し、パスには「/ assets」または「/ assets/images」を使用しないことに注意してください）

Railsは他のヘルパーメソッドも提供していますが、ここに別の答えがあります： Rails 3.1を使用するときにSassで参照画像を使用するにはどうすればよいですか？

0
benrugg