タイトル通りやっていきます。
##環境
Ruby2.7
Rails6.0.2
webpack
##はじめに：アセットパイプラインとwebpackは違う
「あれ？ちゃんと画像はassets/imagesの下に置いているし、image_tagのパス指定も間違っていないのにブラウザで画像が表示されない！」
こんなことでお困りのあなた、もしかしてアセットパイプラインではなく、webpackを使用していませんか？
私はそうでした。
最近のRails開発においては、sprocketsを用いたアセットパイプラインではなく、webpackを使うのがモダンなようです。しかし私のようにRails初心者でwebpackを理解していないくせに使っていると、上記のように画像を表示できなくなるのです。
あなたはアプリ作成時にオプションで--skip-sprocketsをつけたり、またはコマンドライン上でbundle exec rails webpacker:installしたりしていませんか？
この場合はあなたはwebpackを使っています。なのでアセットパイプラインであるassets/imagesの下に画像を置いても意味がないのです。
というわけでこれからwebpackを用いた画像の表示を説明していきます。
##方法
まずはbundle exec rails webpacker:installでwebpackを導入します。既にやった方はやらなくて良いです。インストールが完了するとconfig配下にwebpackerの設定ファイル、app配下にjavascriptディレクトリが生成されます。
次にapp/javascriptの下にimagesフォルダを作成しましょう。できたらそこに表示させたい画像ファイルを置きます。
次はapp/javascript/packs/application.jsファイルを開きます。下にコメントされた状態で
const images = require.context("../images", true);
const imagePath = name => images(name, true);
というコードがあるはずです。そのコメントを外しましょう。
ここまで来たら後はviewでimage_pack_tagを使えば画像が表示できるはずです。
<%= image_pack_tag '画像名' %>
お疲れさまでした。