0
1

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.

Railsのscssで画像のパスを指定できていなかった話

Last updated at Posted at 2021-07-26

やりたかったこと

li要素の「・」を自前の画像に変えてサイズを調整したかった

うまくいかなかったこと

いくら画像を指定してもliの・が自前の画像に変更されない。

#試したこと

cssでliの・を画像に変更する方法をググって以下の方法を試した

background-image:url("画像ファイルの相対パス")
background-repeat: no-repeat;
background-size: 20px;
background-position:left center;

liの・を画像に変えることは可能だが、それだと画像サイズの変更ができないためliの背景画像として表示させた。(かった)

解決

原因は画像ファイルをCSSのurl関数にscssファイルからの相対パスで指定していたこと。
scssはそのままcssとして読み込まれるのではなくコンパイルされてcssになる様なのでこの書き方だと画像が見つからない(エラーも出なかったので気づかなかった)
正しい書き方はこう railsのヘルパーメソッドimage-urlを使う

background-image: image-url("ファイル名");

image-urlはrailsでsample_pjというプロジェクトであれば
sample_pj/app/assest/image配下のファイルを探してくれる。
images直下のsample1.pngという画像を出したい場合はこう

background-image: image-url("sample1.png");

images直下にsharedというディレクトリがありその中のsample2.pngを表示させたい場合はこう

background-image: image-url("shared/sample2.png");

最後に

cssとscssの違いをなんとなーくいけるだろでやっていたためパスが変わることなど全く頭になかったので長時間のつまづき。よく考えてみたらhtml.erbで表示させる時もimage_tagというrailsのメソッド使ってたなーと。

0
1
0

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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?