40
56

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 5 years have passed since last update.

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

Last updated at Posted at 2019-04-12

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

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

#####エラー文

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:thinking:
開発環境と本番環境ではイメージへのパスが異なるため!

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

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

##Solution:innocent:
#####①プリコンパイルで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
この記事の①を実践しました。

40
56
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
40
56

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?