【DAY19】画像のパス指定(Laravel)

はじめに

現在、Laravelを使用してQ&Aサイトを作成している。ファビコンやナビゲーション部分に画像を使用していましたが、ページを遷移すると画像が表示されないことに気づきました。エラーの原因と解決方法についてここに記します。

エラー時の状況

使用する画像はpublicフォルダに入れた。Laravel Breezeを使用しており、各ページはファビコンやナビゲーションを記述したビューを継承していました。
画像のパスは以下のように指定していました。

<img src="icon.png">

エラーの原因

エラーが発生した原因は単純で、相対参照でパスを指定しており、ページを遷移したき参照する箇所が変わってしまうことでした。
ページ遷移後の開発者ツールでurlを../icon/pngに変更すると画像が正しく表示されました。

従って、パスの指定を絶対参照にすることで解決しました。

<img src="/icon.png">

これでも正しく表示されるようにはなりましたが、Laravelにはasset()というヘルパ関数があるのでこちらを利用することにします。

<img src="{{ asset('icon.png') }}">