技術

【Rails】productionモードでCSSの画像が表示されない

投稿日:

どうも中田です。

css内で画像を設定して、productionモードで動かすと画像が出ない!!(タイトルとそのままのこと言っちゃった)
ってことがあったので書いておきます。

rails4にてproductionモードで動作させる場合、事前にcss、js、画像ファイルなどのアセットをプリコンパイルする。
その際、ファイル名の後ろにダイジェストが付与されるのだが、css内部で画像を指定する場合、ダイジェストまで意識しないといけない。

プリコンパイル前のファイル名

login.png

プリコンパイル後のファイル名

login-df4b86a870a56daf4e6d646db6ce8e55.png”

#main {
  background-image: url("login.png");
}

cssでこのように定義するともちろん画像は表示されない。
では、どうするか。

手順は3つ
1. css -> scss 拡張子にする
2. url -> image-url にする
3. プリコンパイル実施 (bundle exec rake assets:precompile RAILS_ENV=production)

#main {
  background-image: image-url("login.png");
}

これでOK。
プリコンパイルした際、ちゃんと画像ファイルに付与されるダイジェストを入れた状態でCSSが生成される。

感謝サイト:
http://kgmx.hatenablog.com/entry/2014/06/26/085304

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

heroku + node.jsでError R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

こんにちは heroku + node.jsでアプリを作っていて、いざherok …

どの端末で見ても、要素を上下左右の中央に配置する!

こんにちは。たなかです。 最近はスマホで表示するWebアプリの開発をさせてもらっ …

[Angular] has no exported member ‘XXXLoginComponent’.

どうも中田です Angularでコンポーネント名を階層構造にあった名前にしようと …

no image

【Rails】Railsでsitemap.xmlを作成する

こんにちは Railsでsaitemap.xmlを作成する方法を紹介します。 s …

git_logo

[Git] どのコミットでバグが入ったか原因究明する方法【git blame】

こんにちは。さとうです。 今回はgitを使って、どのコミットでバグが入ったか原因 …