Ruby on RailsをHerokuでデプロイしたら画像が出てこない問題

herokuでデプロイしてみたら、TOPぺーじの背景画像が表示されず。
ローカルサーバーでは問題なかったのになぜ？
どこがおかしいのか確認してみる。

画像の保存場所

今回はDBに登録された画像ではなく、app/assets/imageに保存された画像を使用している。
実際の画面がこんな感じ。

同じディレクトリに保存されている画像をimage_tagで使ってるけどそっちは問題なし。
そのコードはこちら
index.html.haml

= image_tag 'mercari.png'

ということはscssの方で画像が読み込めていないとみた。

scssのコード確認

top画像を引っ張ってるのはこちらのscss。

body {
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  background: url('bg.jpg') fixed;
  background-size: cover;
}

特に問題なさそうに見えるんだけど…

というわけでRAILGUIDESで書き方を確認。

2.3.2 CSS and Sass
When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.
image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

おっと、やっぱりここが違いそうだ。

scssの修正

RAILGUIDESに載ってたように修正を加える

body {
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  background: image-url('bg.jpg') fixed; /url => image-urlに修正/
  background-size: cover;
}

では確認

できた！