1
0

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 1 year has passed since last update.

「Herokuで画像表示できない」を解決

Last updated at Posted at 2022-02-25

はじめに

 現在オリジナルアプリの開発中です。Heroku環境でアプリをアップロードしているのですが、assetsに配置した画像が表示されないという問題がありました。解決方法がわかったのでまとめておきます。

問題

 app/assets/images 配下に設置した画像が表示されない。(ローカル環境では表示されている)

ローカル環境では表示されているため、本番環境では追加の設定がいるのかもしれない。と思い調べると解決方法が出てきました。

解決方法

 解決方法は image_tagのファイルの指定方法を修正することでした。

qiita.rb
 <%= image_tag "/assets/top.png" ,class:"img-fluid" %>

image_tagに渡す画像のバスの指定方法を間違えていました。
この書き方では、ローカルだと表示されるのですが、本番環境だと表示されません。

以下に修正しました。

qiita.rb
 <%= image_tag "top.png" ,class:"img-fluid" %>

結果無事に本番環境でも画像を表示する事ができました。

追記 以下の方法は間違いでした

最初自分が採用した以下の解決方法は間違いでした。(画像は表示されるけど推奨されない)
編集リクエストありがとうございます。

production.rb
config.assets.compile = false

という記述があるので、

production.rb
config.assets.compile = true

に変更するやり方です。
この方法でも画像を表示できるのですが、本番環境でのパフォーマンスに悪影響を及ぼすため推奨しないとのことです。

以下を参考にしました。
https://qiita.com/jnchito/items/3d225112a3ac95379b1d

まとめ

 本番環境でのエラーだったため、最初何が原因か特定できなかったのですが、調べたらすぐに出てきました。

分からなくても焦らず、まずは冷静になる。→状況を整理する。→ググる

という習慣を身につけたいと思います。

また、解決方法にも様々あるので、精査できるようになりたいです。

1
0
2

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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?