【Ruby on Rails】CSS・SCSSでbackground-image(背景画像)を設定する

Ruby on Rails

はじめに

railsでCSS・SCSS(Sass)から画像を読み込む場合、画像の置き場所で読み込み方が違います。

railsの基本的な画像の置き場所は、

  1. assets/imagesの配下
  2. public/imagesの配下

の2通りです。

今回はCSSとSCSS(Sass)の各画像の読み込み方を紹介します。

実行環境

Rails : 5.2.6

Ruby : 2.6.8

CSS

assets/images配下の画像を読み込む場合

cssの拡張子にの後ろに.erbを追加し、asset_pathもしくはimage_pathヘルパーメソッドを使用して、読み込みます。

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

データURIスキーム(CSSファイルにデータを直接埋め込む手法)を使いたい場合は、asset_data_uriを使用します。

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

もし、下記のコードのように画像のパスを直接指定したら、

background-image: url(/assets/images/image.png);

画像は読み込まれず404 not foundが発生します。

理由としてはRailsのアセットパイプライン機能にあるのですが、詳細は後で記載します。


public/images配下の画像を読み込む場合

こちらは画像のパスを書き込めば読み込めます。

erb拡張子も追加する必要はありません。簡単ですね。

background: url(/images/image.png);
background-image: url(/images/image.png);

SCSS(Sass)

assets/images配下の画像を読み込む場合

SCSSでは、asset-pathの代わりに、image-urlもしくはasset-urlヘルパーメソッドを使用して、読み込みます。

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

image-urlを使用する際、SCSSではerb拡張子をつける必要はありません。

sass-railsというgemをインストールすることで、ヘルパーメソッドを使用できるようになっているからです。

ちなみにですが、Rubyではasset_pathのようにアンダースコア(_)を使用し、SCSSasset-pathのようにハイフン(-)を使用します。


public/images配下の画像を読み込む場合

CSSと同じ方法です。

background: url(/images/image.png);
background-image: url(/images/image.png);

アセットパイプラインについて

アセットパイプラインについて簡単説明すると、

assets配下のJavaScriptやCSS、imageファイルを最終的にアプリを使う上で都合の良い状態にするための処理をするフレームワークです。

アプリを使う上で都合の良い状態にするために4つ処理をします。

  • 高級言語のコンパイル
  • アセットの連結
  • アセットの最小化
  • ダイジェストの付与

各処理の説明はRailsガイドこちらを参考にしてみてください。


ここで重要なのはassets/imagesもアセットパイプラインの対象だということです。

assets/images配下の画像ファイルは、4つめの処理のダイジェスト(ハッシュ値)の付与で名前が変わってしまいます。下記が実際にブラウザで読み込まれた時の画像名です。

image-505050f044b5491e1d3c351862282b6ffe77a39124d81ef60779b755b6591591.png

名前が変わるので、直接パスをurl(/assets/images/image.png)ように指定しても、画像は読み込まれません。

じゃあどうすればいいのか?と思うかもしれませんが、説明で使用したヘルパーメソッドを使用すればOKです。

ヘルパーメソッドについて

assets/images配下の画像のパスを指定するときに、asset_pathimage-urlなどのヘルパーメソッドを使用しましたが、

これは何をしているのかと言いますと、アセットファイルへのパスを取得しています。

ヘルパーメソッド下記に変換される
image-url(“rails.png”)url(/assets/rails.png)
image-path(“rails.png”)“/assets/rails.png”
asset-url(“rails.png”)url(/assets/rails.png)
asset-path(“rails.png”)“/assets/rails.png”
Sassではハイフン(-)、Rubyではアンダースコア( _ )

このヘルパーメソッドはダイジェスト(ハッシュ値)の付与された画像ファイル名も取得してくれるので、assets/images配下の画像が表示されます訳です。

まとめ

railsで背景画像を指定するのにも、色々と奥が深いです。

書いてあるコードをコピぺして実装するだけではなく、意味を理解してみるとより良い学習になるかもしれません。

コメント

タイトルとURLをコピーしました