どーも！
たかぽんです！
今回はLaravelでpublicにある画像をbladeにて表示させてみようと思います！
画像を用意する
Laravelでは保存した画像などを閲覧できるようにする場合、publicディレクトリというところに配置します。
以下のディレクトリ構造についてのページをみると...
publicディレクトリ
publicディレクトリには、アプリケーションへの全リクエストの入り口となり、オートローディングを設定するindex.phpファイルがあります。また、このディレクトリにはアセット（画像、JavaScript、CSSなど）を配置します。
前半部分に関してはLaravelのライフサイクルにて一番最初にくるindex.phpファイルについて記述されています。(参考)
今回は特に後半の...
"アセット（画像、JavaScript, CSSなど）を配置します。"
の部分に着目します。
laravelでは"public"ディレクトリに対してJS、CSS、そして画像を配置します。
これらのアセットと呼ばれているものは、"一般公開へのアクセスを許すファイル"になります。
正確には、"storage/app/public"もあるのですが、この"public"ディレクトリにはサービス提供者側から見せたい画像等（ロゴ画像やデザイン用の画像等...）を配置します。
そのため、今回も画像をpublicディレクトリへ配置していきましょう。
適当な画像を以下のように配置します。
わかりづらいんですが、LogicProの新機能画面のスクショを"test.png"として、"public/images/test.png"という形で配置しています。
これで、表示する画像の準備はOKです！
画像を表示する
さて、最後に画像を表示します！
といってもめっちゃ簡単です！
bladeにて以下のようにimgタグを記載するだけです...!
<img src="/images/test.png">上記のような形でもいいですし、以下のようにassetヘルパメソッドでも可能です。
<img src="{{ asset('images/test.png')}}">例えば...
テスト画面に以下の要素を記載した場合は...
<img src="/images/test.png" width="100" height="100">
assetの結果: {{ asset('images/test.png') }}
<img src="{{ asset('images/test.png')}}" width="100" height="100">
一番上のタイトルは別で書いている内容ですが、画像が2枚、そしてassetの結果として、"http://localhost/images/test.png"というURLが返ってきています。
上記のURLに直接アクセスをすると、画像を見ることができます。
後述するシンボリックリンクやassetについては以下の"パブリックディスク"を参照ください。
基本的な画像の表示は以上です！
今回の画像表示では使用しませんでしたが、シンボリックリンクについて最後に触れておこうと思います。
シンボリックリンクを設定する
シンボリックリンクとは...？
laravelのデフォルト設定では、"storage/app/public"というように、storageの中のappの中のpublic以下のファイルをpublicディスクとして扱っています。
そのため、"config/filesystems.php"の中を見ると...
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],上記のように、デフォルト設定だと、"storage_path('app/public')"によって、"/var/www/html/storage/app/public"といったファイルがこのpublicディスクのルートファイルとなります。
つまり、このpublicディスクを用いて保存等を行うと、"{プロジェクト名}/storage/app/public"のフォルダに対して保存が行われます。
しかし、上記のフォルダは最初の公開するための"{プロジェクト名}/public"フォルダではないので、閲覧ができません。
そのため、シンボリックリンクを設定してあげて、ここのファイルも使えるよ〜と、設定する必要があるわけです。
システムのdiskを使わずにpublic下に配置しておけば先程試したように使えますが、後々publicディスクを使う際は設定が必要になるんですね。
方法は、以下のコマンドを実行するとOKです。
php artisan storage:link
// 実行例
root@83d0a211eebe:/var/www/html# php artisan storage:link
The [public/storage] directory has been linked.has been linked...と出たらできているのでシンボリックリンクの準備はOKです！
今回は軽く触れるだけに留めておきます！
まとめ
今回はlaravelのpublicフォルダに直接画像を配置、そしてその画像をbladeで表示...といったことをやってみました！
そんなに難しくはなかったかなと思います！
もしdiskを使用してpublicへデータを保存...といった風にする場合はデフォルト設定だとシンボリックリンクの設定が必要になります。
そこも今後解説できたらなぁ..と思います...!
それでわ！
