概要
データベースに登録されたパスから画像ファイルを取得し、ビューで表示する手順を整理する。ここでは、indexページで画像のほかに商品名や商品価格も表示させる。
- アップロード画像処理～準備
- 画像ファイルの入力
- アップロード画像ファイルの保存・登録
- アップロード画像の表示
- アップロード画像の変更・削除
表示された画像ファイルの変更・削除についてはこちらを参照。
publicディスクへのリンク作成
アップロード画像を保存したpublicディスクはstrage/app/publicに割り当てられているが、このディレクトリーはWebサーバー上は公開されていない。
そこで、publicディスクをアプリケーション下のpublicディレクトリーで公開するため、以下のコマンドを実行しておく。
|
1 |
$ php artisan storage:link |
これにより、publicディレクトリーにシンボリックリンクstorageが作成されて、publicディスクに割り当てられたディレクトリーに公開領域からアクセスが可能になる。
|
1 2 3 4 5 6 7 8 |
$ ls -Al public 合計 16 -rw-rw-r--. 1 vagrant vagrant 593 9月 6 21:24 .htaccess -rw-rw-r--. 1 vagrant vagrant 0 9月 6 21:24 favicon.ico -rw-rw-r--. 1 vagrant vagrant 1823 9月 6 21:24 index.php drwxrwxr-x. 4 vagrant vagrant 159 9月 6 21:24 object_sample -rw-rw-r--. 1 vagrant vagrant 24 9月 6 21:24 robots.txt lrwxrwxrwx. 1 vagrant vagrant 70 10月 21 21:06 storage -> /home/..../laravel_tutorial/storage/app/public |
コントローラー～index
indexアクションでitemsテーブルの全データを取得し、これをビューに渡して表示させる。
|
1 2 3 4 5 6 7 8 9 10 |
class ItemController extends Controller { public function index() { $items = Item::all(); return view('items.index', ['items' => $items]); } ........ } |
ビュー～index.blade.php
コントローラーから$itemsを受け取り、@foreachディレクティブによって全データの内容と画像データを表示する。
ここでは\Storageファサードのurl()メソッドを使って画像ファイルのパスを得ていて、これによってpublicディレクトリー下のstorage/app/publicディレクトリー下にある画像ファイルにアクセスしている。
|
1 |
\Storage::url(publicディスク下のパス) |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>商品一覧・入力</title> </head> <body> <h1>商品一覧・入力</h1> ........ {{-- 商品データ・画像表示 --}} @foreach ($items as $item) <p>{{ $item->name }} : {{ $item->price }}円</p> <div> @if ($item->image !=='') <img src="{{ \Storage::url($item->image) }}" width="25%"> @else <img src="{{ \Storage::url('items/no_image.png') }}"> @endif </div> @endforeach </body> </html> |
なお、商品画像が登録されていない場合は、プレースホルダー画像を表示させている。