Q&A
お返事ありがとうございます！
public/imagesに画像を配置しました。ローカルでは問題なく表示されすのですが、
本番ではやはり表示されません、、、
もう少しいろいろやってみます！何か他にアドバイスいただけたら嬉しいです！
でもこれからは一般的であるpublic/imagesの配下に画像をおこうと思います！
貴重な意見ありがとうございました！
前提・実現したいこと
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件
0
app/assets/images に置いた画像が本番環境で見えないとすると可能性は
- git管理下にするのを忘れている。git status でわかります
- 本番で assets:precompileしわすれた
辺りでしょうか。
画像がないときは表立ってエラーは立ちません。
サーバーの log/production.log をみると GET イメージファイル名 で失敗というのがあるか見てみるのも方法です。
ファイル名は変換されてますので注意。
例えば app/assets/images/hart.png だと "前にいろいろ/hart-ここにいろいろ.png" になってます。
投稿2020/08/29 12:47
総合スコア23416
0
public/imagesの配下において、background-image: url("/images/hogehoge.png");のようにするのがシンプルなやり方です。
詳細な設定方法や、その他のapp/assets/以下においたときなどは、下記が参考になるかと思います。
https://qiita.com/knxrvb/items/c78c08a0a3c9d4095f3f
投稿2020/08/29 11:27
総合スコア3365
確認方法として、https://xxxxxx.herokuapp.com/public/images/hoge.pngで画像は表示されますか？
表示されないとしたら、ファイルがherokuに反映されていないということですので、gitでコミットしてから、git push heroku masterまでを再度確認してみてください。
またChromeなどの検証ツールを利用すればmain-imageクラスのCSSがきちんと反映されているかも確認できると思います。
> 一般的であるpublic/images
とのことですが、一般的ではなく、あくまでCSSから呼び出すのにシンプル（＝CSSのファイル名などを変更しなくて良いのでわかりやすい）に実装できるということです。
assets/以下におくと画像を圧縮できたりするので、それはそれでメリットが大きいかと思います。
送ってくださったurlで画像は表示されませんでした。
Chromeの検証ツールではしっかりcssが反映されていることが確認できました。
git statusで確認しましたがnothing to commit, working tree cleanとしっかり全てコミットされていて
git push heroku masterもEverything up-to-dateとなります。
デプロイの仕方に問題があったのでしょうか？
public/imagesの件も丁寧に答えてくださってありがとうございます。
知識が乏しくて申し訳ないです。。
public/images/hoge.pngにおいている画像は表示されています！
urlを打ち込んだらルーティングエラーになります。
解釈間違えてしまっていたろ申し訳ないです。。
すいません。パスを間違えてました。。。
http://localhost:3000/images/hoge.pngです。
そしてHerokuでもhttps://xxxxxx.herokuapp.com/images/hoge.pngで確認してみてください。
開発環境では画像が表示されました！
herokuで試した所The page you were looking for doesn't exist.このようになりました。
記事を見るとルーティングを直している方が多く私の場合ルーティングは大丈夫だと思うので
rake assets:precompileをしてみましたが解決はできませんでした。。。
うーん、ディレクトリが間違っているなどのケアレスミスがありそうですね。
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
ちなみにpublicは、一番上の階層に最初からある、404.htmlとかのファイルが入っているところになります。
どうしてもうまくいきません。。
第一に僕の理解がまだ全然足りていないところが多いと思います。
ずっと付き合って頂いていて申し訳ないので一旦この件は保留にしてもっと勉強します！
解決方法のアドバイス本当に勉強になりました。ありがとうございました！
必ず自己解決して見せます！！
ちなみにソースの開示ができるようなものであれば、ざっと見ますよー
ほんと申し訳ないです、、お願いします！
https://github.com/ken-ken-k/suppapp
githubです！
なにもしていないですが、出ていますね。
キャッシュとかの問題かも知れないのでスーパーリロードなどを試してみてください。
https://suppapp-test.herokuapp.com/
どうしてもダメです笑
デプロイの仕方に問題があるかなと思うのでもう一度勉強します。
本当にありがとうございました！
デプロイ先のURLを開示してもらうことってできますか？
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/29 17:31