はじめに
ローカル環境ではしっかりと画像が表示されていたのに本番環境にデプロイすると画像が表示されなくなった時の対応。
環境
・Rails 6.0.3.
・Haml
状況
以下の表記みたいにRailsのヘルパーメソッドのimage_tagを用いて画像をパス指定していてローカル環境ではうまく表示されていた。
= image_tag "assets/material/icon/icon.png"
しかし、いざデプロイすると画像が表示されなくなりました。（この表記もあやしいですが）
もちろんscssファイルに記載しているbackground-imageも表記されませんでした（この対応ついては下の方に記載してます）
原因
本番環境では、画像もコンパイルされ、画像ファイル名が変わりディレクトリも変わってしまいます！
本番環境とローカル環境での違いは、
パスが変わる（app/assets/images/icon.png => /assets/icon.png）
名前が変わる（icon.png => icon-xxx… .png) ※xxx… はdigest
これが変わってしまいます！
対策
assets_path()というRailsのオプションを使用します。
これは便利で本番環境へデプロイしファイル名やディレクトリが変わってもそれに対応しているのでローカルも本番もこれ一つで対応できてしまいます！
具体的には以下のように修正
= image_tag asset_path("assets/material/icon/icon.png")
これでうまく行くと思いきや、、、、
ローカル環境でも表示されなくなりました。。。。
ダメ元でデプロイしても結果は同じ（当然です）
asset_pathでもうまくいかない原因
asset_pathというオプションはapp/assets/imagesの直下にあるファイルに対応しているが、どうやらその先のディレクトリの中にあるファイルには対応していないみたいです。
対応
ディレクトリで管理していた画像をすべてapp/assets/images直下へ移動し、表記も下記のように修正しました。
= image_tag asset_path("icon.png")
これでデプロイするとようやく画像が表示されました！！
まとめるとasset_pathというオプションを使うことと画像ファイルの場所をimages直下にすることが解決策でした。
[scss]background-imageについて
こちらも以下のようにただ画像ファイルのパスを指定してもうまくいきませんでした。
background-image: url("main-image.jpg");
対応
image-urlを使うとローカルでも本番環境でも対応してくれます。
background-image:image-url("main-image.jpg");
このように記述すると対応できます。
もちろん画像はapp/assets/images直下のものを指定
ここで注意が必要なのは:(コロン)の後はスペースを開けずに記述する点です。SCSSの記述はコロンのあとは大体半角スペースを開けて記述していたのでクセになってました。
なので誤っているとは知らずになかなか原因に辿り着けずにいました。
これでデプロイすると正常に画像が表示されました！！