はじめに
今回下記アドベントカレンダーに参加したので開発でのチャレンジ、成功失敗という点から記事を書きたいと思います
環境
Windows, WSL
Docker
Ruby 3.2.3
Rails 7.1.3
どういう状況？
<img src="app/assets/images/undraw_Swipe_profiles_re_tvqm.png" alt="スマートフォンのアイコン" class="h-full object-cover rounded-lg" style="max-height: 500px; max-width: 100%;" />
app/assets/images/undraw_Swipe_profiles_re_tvqm.pngこのように画像を配置しました。
そして上記のようにimg srcで配置した画像を表示するよう設定。
出来たはずなのですが、画像が表示されない
確認
- 画像のパスを確認しましたが問題はなさそう
- コンソールやブラウザの開発者ツールをチェックも行ったが問題はなさそう
これで解決
アセットパイプライン: 画像を表示するために、image_tag ヘルパーを使用する
<%= image_tag 'undraw_Swipe_profiles_re_tvqm.png', alt: 'スマートフォンのアイコン', class: 'h-full object-cover rounded-lg', style: 'max-height: 500px; max-width: 100%;' %>
どうして？何が原因だったの？
最初のコードで画像が表示されなかったのは、Railsアプリケーションで画像ファイルを管理・表示する方法が正しく使われていなかったため。
<img src="app/assets/images/..."> という形で指定しても、Railsの特有の仕組みである「アセットパイプライン」を経由しないため、正しいパスに変換されずに画像が読み込まれなかったそうです
アセットパイプラインとは？
Railsのアセットパイプラインは、CSS、JavaScript、画像などの「アセット」（Webページのスタイルや機能を構成するファイル）を効率よく管理、圧縮、提供する仕組み！！
具体的にアセットパイプラインがやっていること：
-
アセットの管理:
app/assetsディレクトリ内のファイル（画像、CSS、JavaScript）を自動的にRailsが検出し、処理する。 -
パスの解決: Railsは、
image_tagなどのヘルパーメソッドを使うと、指定したファイルを自動的に探し、正しいURLに変換する。ファイルが実際にはどこにあるか、というパスを開発者が気にする必要がなくなる！！ - 最適化: デプロイ時には、アセットを自動的に圧縮し、ブラウザに早くロードされるように最適化する。また、ファイル名をハッシュ化（指紋化）してキャッシュ管理をしやすくする。
なぜ <img src="app/assets/images/..."> では画像が表示されないのか？
<img src="app/assets/images/..."> と直接ファイルパスを指定すると、ブラウザは「そのパスにファイルが直接ある」と判断。
ですが、Railsのアセットパイプラインは、app/assets フォルダのファイルを処理し、ブラウザに渡すために最適化しているため、直接のファイルパスは使わずに、Railsが提供するヘルパーメソッド（例えば、image_tag）を使う必要がある！！
具体的には、ブラウザは「app/assets/images/undraw_Swipe_profiles_re_tvqm.png」の場所にはアクセス不可！！
それはRailsが管理している内部ディレクトリだからであり、アセットパイプラインを使って初めて、適切なURL（例: /assets/undraw_Swipe_profiles_re_tvqm-1234567890.png）として提供される
image_tag ヘルパーでの解決
<%= image_tag 'undraw_Swipe_profiles_re_tvqm.png', ... %> を使うことで、Railsが自動的に画像ファイルのパスを解決し、適切なURLを生成する。
これにより、Railsのアセットパイプラインが正しく機能し、画像が表示されるようになった。
さいごにまとめ
- アセットパイプラインは、画像やCSS、JavaScriptなどのファイルを効率的に管理・提供するRailsの仕組み。
- 直接のパス指定（
<img src="app/assets/images/...">）では、ブラウザがRailsのアセットパイプラインを経由してファイルを取得できない。 -
image_tagを使うことで、Railsが正しいURLを生成し、画像が正しく表示されるようになる。 - Railsの完全理解の道はまだまだ遠い、、頑張ります！！
今回の記事が何か参考になれば幸いです。