railsアプリケーションをデータベースをmysqlにしてherokuでデプロイしたところトップページのみ画像表示されない

前提・実現したいこと

railsで画像投稿をしてシェアするアプリケーションをデータベースをmysqlに指定し、herokuでデプロイを行なった際にトップページのみ表示されない現象を解決したいです。

発生している問題・エラーメッセージ

エラーメッセージはなく、ローカルでは表示されているトップページの画像が表示されません。

該当のソースコード

ローカルでの画像の表示の仕方は
image画像はapp/assets/images/hoge.pngとしています。
cssで
.main-image{
background-image: image_url('hoge.png');
background-size: contain;
}
このように記述しています。

ソースコード

試したこと

本来はimage_urlのところをurlとしていたのでそこを直したり、htmlに記述して出す方法も試しましたが上手くいきませんでした。
その他にもconfig/production.rbの記述をtrueに帰るなども試しましたが上手くいきませんでした。
画像投稿した際の画像は上手く表示できていて、その他の機能に関してもしっかり機能しているのでデプロイのところではないと見ています。

補足情報（FW/ツールのバージョンなど）

Rails 6.0.3.2
mysql2
ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

app/assets/images に置いた画像が本番環境で見えないとすると可能性は

git管理下にするのを忘れている。git status でわかります
本番で assets:precompileしわすれた

辺りでしょうか。
画像がないときは表立ってエラーは立ちません。
サーバーの log/production.log をみると GET イメージファイル名で失敗というのがあるか見てみるのも方法です。
ファイル名は変換されてますので注意。
例えば app/assets/images/hart.png だと　"前にいろいろ/hart-ここにいろいろ.png" になってます。

投稿2020/08/29 12:47

winterboum

総合スコア23567

kenke

2020/08/29 17:31

ご回答ありがとうございます！参考にさせていただきます！！

行動規範の内容に同意します

public/imagesの配下において、background-image: url("/images/hogehoge.png");のようにするのがシンプルなやり方です。

詳細な設定方法や、その他のapp/assets/以下においたときなどは、下記が参考になるかと思います。
https://qiita.com/knxrvb/items/c78c08a0a3c9d4095f3f

投稿2020/08/29 11:27

no1knows

総合スコア3365

kenke

2020/08/29 12:09

お返事ありがとうございます！ public/imagesに画像を配置しました。ローカルでは問題なく表示されすのですが、本番ではやはり表示されません、、、もう少しいろいろやってみます！何か他にアドバイスいただけたら嬉しいです！でもこれからは一般的であるpublic/imagesの配下に画像をおこうと思います！貴重な意見ありがとうございました！

no1knows

2020/08/29 12:21 編集

確認方法として、https://xxxxxx.herokuapp.com/public/images/hoge.pngで画像は表示されますか？表示されないとしたら、ファイルがherokuに反映されていないということですので、gitでコミットしてから、git push heroku masterまでを再度確認してみてください。またChromeなどの検証ツールを利用すればmain-imageクラスのCSSがきちんと反映されているかも確認できると思います。 > 一般的であるpublic/images とのことですが、一般的ではなく、あくまでCSSから呼び出すのにシンプル（＝CSSのファイル名などを変更しなくて良いのでわかりやすい）に実装できるということです。 assets/以下におくと画像を圧縮できたりするので、それはそれでメリットが大きいかと思います。

kenke

2020/08/29 17:39

送ってくださったurlで画像は表示されませんでした。 Chromeの検証ツールではしっかりcssが反映されていることが確認できました。 git statusで確認しましたがnothing to commit, working tree cleanとしっかり全てコミットされていて git push heroku masterもEverything up-to-dateとなります。デプロイの仕方に問題があったのでしょうか？ public/imagesの件も丁寧に答えてくださってありがとうございます。知識が乏しくて申し訳ないです。。

no1knows

2020/08/30 02:39

開発環境で、http://localhost:3000/public/images/hoge.png（ドメインなどはご自身の環境にあわせてください）で画像は表示されますか？

kenke

2020/08/30 03:46

public/images/hoge.pngにおいている画像は表示されています！ urlを打ち込んだらルーティングエラーになります。解釈間違えてしまっていたろ申し訳ないです。。

no1knows

2020/08/30 04:25

すいません。パスを間違えてました。。。 http://localhost:3000/images/hoge.pngです。そしてHerokuでもhttps://xxxxxx.herokuapp.com/images/hoge.pngで確認してみてください。

kenke

2020/08/30 05:02

開発環境では画像が表示されました！ herokuで試した所The page you were looking for doesn't exist.このようになりました。記事を見るとルーティングを直している方が多く私の場合ルーティングは大丈夫だと思うので rake assets:precompileをしてみましたが解決はできませんでした。。。

no1knows

2020/08/30 07:26 編集

うーん、ディレクトリが間違っているなどのケアレスミスがありそうですね。 1つずつ見直してみてください。念のため、必要な設定がないか確認するためにscaffoldで検証用のサイトを作りました。 https://test-bgimage.herokuapp.com/ https://test-bgimage.herokuapp.com/images/aaa.jpg 〜各設定〜 /public/images/aaa.jpg routes.rb resources :posts root to: 'posts#index' application.scss body{ width: 100%; height: 100%; background-image: image_url('/images/aaa.jpg'); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; text-align: center; table{ margin: 0 auto; } } config/environments/production.rb config.assets.compile = true

no1knows

2020/08/30 07:25

ちなみにpublicは、一番上の階層に最初からある、404.htmlとかのファイルが入っているところになります。

kenke

2020/08/30 14:34

どうしてもうまくいきません。。第一に僕の理解がまだ全然足りていないところが多いと思います。ずっと付き合って頂いていて申し訳ないので一旦この件は保留にしてもっと勉強します！解決方法のアドバイス本当に勉強になりました。ありがとうございました！必ず自己解決して見せます！！

no1knows

2020/08/30 14:40

ちなみにソースの開示ができるようなものであれば、ざっと見ますよー

kenke

2020/08/30 19:44

ほんと申し訳ないです、、お願いします！ https://github.com/ken-ken-k/suppapp githubです！