本番環境で背景画像を表示させる

前書き

なぜそもそもこんな記事を書こうと思ったのかというとrailsを使ってポートフォリオを作成しているのですが画像がうまく表示されなかったからです。試行錯誤を繰り返してローカルで表示できたのに本番で表示できなかったときは心が折れました。

やってみたことの部分は僕の試行錯誤なので興味ない方は結論に飛んでください笑

前提

rails6.0.0
ruby2.6.5

フォルダ階層
assets
　images→karaokeray.jpg
　stylesheets→songs→index.css

やってみたこと1

画像が表示されない原因はパスにあることが多いのでまずはそれを疑いました。

index.cssの記述を確認します。

index.css

background-image: url("../../images/karaokeray.jpg");

確認してもパスはこれであっています。実はこれが落とし穴です。通常の静的HTMLならこの記述で正しいのですがRailsではassetsの中身をそのまんま表示しているわけではなく、主にWebページの表示速度向上などのためにちょっとしたお節介をしているためうまく表示されないそうなのです。要するにassetsが関わっているのでこの書き方では実装できないそうなのです。

そこで

index.css

background-image: image-url("karaokeray.jpg");

に変更してみます。これで表示されるかと思いきやここでも表示されませんでした。。。

やってみたこと2

割とショックを受けつつもなんとか他に実装する方法はないものかと調べていると新たな記事が見つかりました。
public/assets/images配下に画像を設置して表示する方法です。
というわけでpublic配下に新たにassetsフォルダ（このassetsは先ほどのassetsとは別物で新規作成します。）その中に画像を入れていきます。つまり画像を入れるファイルを変更するのです。
そして

index.css

background-image: url('/assets/images/karaokeray.jpg');

ローカルで確認すると表示されています！！
ようやく解決したと意気揚々に本番にデプロイすると、、なんと表示されませんでした。。
どうやったら表示できるんだ、、と頭を抱えていると優しい人が教えてくれました。

結論

cssファイルをscssに変更する。これだけです。
今までindex.cssとしていたファイル名をindex.scssに変えることで実装できます。（画像ファイルは最初のやってみたこと1の段階に戻してください。）

index.scss

background-image: image-url("karaokeray.jpg");

これでローカルでは問題なく表示できたので本番で確認していきます。すると、、しっかり表示できていました！！！！

　　　　　　　　　　　　　↓こんな感じにできました。↓

終わりに

なぜこれで実装できるのか自分の頭で整理しているところでまだちゃんと理解できていないのでもう少し勉強しようと思います。アセットパイプラインは奥が深そうです。ただのHTMLとCSSの問題だと思っていたので想像以上に苦戦しました。未経験からの転職を目指して頑張っていきます！！