1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-08-23

実現したいこと

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

開発環境

  • 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の解説はこちらを参考にしました

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?