本番環境でのみ画像が表示されない


開発環境では画像は表示されるが、本番環境では画像表示されないことで
めっちゃハマったので備忘録。

problem

開発環境では画像は表示されるが、本番環境では画像表示されない

エラー文
Failed to load resource: the server responded with a status of 404 (Not Found)
HTML
.imageslider.banner__slider
%div= image_tag 'banner-nasukashi’
%div= image_tag 'banner-new-life'
%div
Image
assets/images直下

Cause

開発環境と本番環境ではイメージへのパスが異なるため!

本番環境ではassets内のSCCファイルやJsファイルが最小化され、Public下で管理されます。
(アセットパイプラインというフレームワークが使われています)

当初の記述ではassetsのimageを読んでいるので、見つからないよ、とエラーになったようです。

Solution

①プリコンパイルでPublic内にAssetsファイルを作成
[ユーザー名|アプリ名]$ rake assets:precompile

deployで自動で作られると思ってたのですが違うかも。。。?

②HTMLのパスを再指定
.imageslider.banner__slider
%div= image_tag asset_path('banner-natsukashi')
%div= image_tag asset_path('banner-new-life')

assets_pathを記述することで、開発環境ならasset/imageから、本番環境ならpublic/assets/imageから引っ張ってくることができます。(便利!)

③デプロイ

→無事表示されました!

他の方法

●imagesをそもそもpublicに作っておく
public/images以下に設置した画像はコンパイルされないため、本番環境にデプロイしてもパスが変わらない様子。

mv assets/images public/images

(assets/image内のファイルをpublic/imageに動かすコマンドです)

Reference

他にもやり方はいっぱいあるようです。
https://qiita.com/wadako111/items/03bc00d914e62243a511
この記事の①を実践しました。