相対パスでimageファイルを参照できなかったのでimage-urlを使ってみた

2239 ワード
CSS scss Rails CSS テキストリンク

実現したいこと

ヘッダーとフッターの背景に画像を挿入したい。
こんな感じ↓

開発環境

  • OS：macOS Big Sur 11.2.2
  • Ruby：2.6.5
  • Ruby on Rails：6.0.0
  • Sass：3.7.4
  • テキストエディタ：Visual Studio Code

つまづいたこと

ヘッダー/フッターのCSSセレクタに

app/assets/stylesheets/style.css
background-image: url("../images/checks.jpg");

と指定して、「checks.jpg」をapp/assets/imagesの配下に格納。
が・・・ページを読み込むと404 Not Foundエラーに。

試しに他の画像ファイルに置き換えてみたが変化なし。
「checks.jpg」をapp/assets/stylesheets配下に（cssファイルと同じところに）置いてみると正しく表示される。

パスが誤っているのかと思い、VScodeで参照して確かめてみるが正しい。しかし404エラーを辿ってみると全然違うところを参照し行っている模様。
少し前に誤ってapp/assets配下のファイル構成をいじくってしまったのが悪さをしているのか・・・結局原因はわからず。

解決方法

SCSSのimage-urlに置き換えた。

学習中のカリキュラムの中にしれっと「image-url」という記述があったので調べてみた。
SaasというCSSを拡張し扱いやすくしたものがあり、image-urlを初めとした様々なヘルパーを利用できる。

利用したrailsのバージョンではSaasがプリセットされていたので早速CSSファイルからSCSSファイルへ拡張子を変更し（Saasの中でもよりCSSに近い書き方ができるSCSSを選択）、以下のようにコードを変更。

app/assets/stylesheets/style.scss
background-image: image-url("checks.jpg");

すると問題なく画像が読み込みできた。
指定している場所としては同じなので不思議だが、やり方は一つではないということで勉強になった。

Saasの解説はこちらを参考にしました