【Laravel】画面に画像を表示する方法。assetsの使い方とurlヘルパ関数との違いについて。

Laravelでブラウザに画像を表示する方法。

1. publicディレクトリに画像をおく

ブラウザが直接読み取るデータなのでpublicディレクトリに設置する。

imgディレクトリを作成しその中に設置。

2. assetヘルパーで呼び出す

imgタグのsrc属性で、assetsヘルパー関数を使って指定の画像を呼び出す。

<img src="{{ asset('img/cat3.png') }}" alt="">

以上で完了。

assetヘルパー関数とは？

publicディレクトリ配下の素材へのURLを生成する。

・assets('ファイルパス')

ディレクトリの中にある場合は、ディレクトリ名.でつなぐ。

ビューで呼び出す

ビュー（拡張子 .blade.php）の中で呼び出す場合は、{{ }}をつける。

.blade.php

{{ asset('img/cat3.png') }}
<br>
{{ asset('robots.txt') }}

▼ブラウザの表示

自分のサイトのpublicフォルダのパスが表示される。

あとは、aタグやimgタグのsrcで指定すれば、各アセットにアクセスできる。

公式ページには以下のように説明されている。（違いはよくわからない）

urlヘルパとassetヘルパの違い

URLを表示するヘルパには、url()という関数もある。

・asset()
asset関数は、現在のリクエストのスキーマ(HTTPかHTTPS)を使い、アセットへのURLを生成。

・url()
url関数は指定したパスへの完全なURLを生成。

結論からいうと、urlもassetもほぼ同じ。ただし、urlは引数でパスを渡せるので動的にURLを生成しやすい。

urlヘルパとassetヘルパは同じ使い方ができる

.blade.php

asset: {{ asset('img/cat3.png') }} <br>
<img src="{{ asset('img/cat3.png') }}" alt="">

<hr>

url: {{ url('img/cat3.png') }} <br>
<img src="{{ url('img/cat3.png') }}" alt="">

全く同じURLが表示される。

urlに特化した使い方

・url('prefixのパス', ['後ろに続くパス'])

例１

{{ url('img', ['cat3.png']) }}

↓

例２

{{ url('column', ['technology', 2020, 1, 10, 'monday']) }}

↓

動的にURLを指定する際に何かと便利。

参考

Laravel公式 ヘルパ一覧