質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

1500閲覧

herokuデプロイ後、画像が表示されません

f--o

総合スコア10

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2019/07/08 04:41

編集2019/07/08 06:06

前提・実現したいこと

herokuでRailsアプリをデプロイしましたが画像が表示できません。

ローカルでは問題なく動作しています。
画像表示以外はherokuでも問題なく動作しています。

三ヶ所で画像を使用しており、

  • background-image
  • image_tag

を使用しています(詳細なコードは下に記載します)。

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

herokuのlogを確認したところ、

2019-07-08T04:29:26.111775+00:00 heroku[router]: at=info method=GET path="/images/about-image.png" host=dreams100.herokuapp.com request_id=5a84a243-991e-4f3f-8199-7a7d2cf2e9db fwd="39.110.211.37" dyno=web.1 connect=1ms service=3ms status=404 bytes=1902 protocol=https

三ヶ所とも画像名以外は同じエラーになっています。
画像のパスが間違っているのかなと推測し調べました。

試したこと

画像は、public/imagesに配置しています。

  • 1つ目(application.scss)
background-image: url('/images/yellowknife.jpeg');
  • 2つ目(application.html.erb)
<%= image_tag "/images/100dreams-logo-white.png", size: "80x60" %>
  • 3つ目(about.html.erb)
<%= image_tag "/images/about-image.png", size: "400x300" %>

調べた結果、
production.rbに以下を追加/変更しました。

config.public_file_server.enabled = true config.assets.js_compressor = Uglifier.new(harmony: true) config.assets.compile = true

gitにcommitし、git push heroku masterし、heroku restartも行いました。
が、状況は変わりませんでした。

調べたところ、assetsに画像を配置しているケースが多いようなのですが、そうするべきなのでしょうか?

追記

上記記載の通り、assets/imagesに画像を全てうつし、以下のように書き直したら表示されました。

1つ目 background-image: image-url('yellowknife.jpeg'); 2つ目 <%= image_tag "100dreams-logo-white.png", size: "80x60" %> 3つ目 <%= image_tag "about-image.png", size: "400x300" %>

今後のために、publicディレクトリに画像を配置したままで解決する方法をご存知の方がいましたら、ご教授いただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問