タイトル通りやっていきます。

##環境
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 '画像名' %>

お疲れさまでした。