Laravel アップロードした画像をviewで表示

Laravel PHP
アップロードした画像をDBへ保存し、view側で表示させる。
Controller

ファイルに関するバリデーション→FormRequest
属性に対してのバリデーション→コントローラ内記述
バリデーションが通ったら画像ファイルをアップロード

  • 更新処理
    $idを元にエロクアントで取得し、shopモデルのname,information,is_selingの情報を
    $request->とすることでフォームからとってくる。

    $imageFile(画像)がnullでなかったら && isValidでアップロードできたか判定して、画像が入っていたら$fileNameToStore(アップロードした画像のファイル)を$shop->$filenameへ格納→`$shop->save();

<?php 
 //画像ファイルのバリデーション
 public function edit( UploadImageRequest $request, $id)
    {
        if($request->isMethod('get')){
          $this->viewData['shop'] = Shop::findOrFail($id);
          return view('owner.shops.edit', $this->viewData);
        }
        if($request->isMethod('post')){
            //属性にバリデーション
            $request->validate([
              'name' => 'required|string|max:50',
              'information' => 'required|string|max:1000',
              'is_selling' => 'required',
            ]);

            //画像アップロード
            $imageFile = $request->image;
            if(!is_null($imageFile) && $imageFile->isValid()){
              $fileNameToStore = ImageService::addByImage($imageFile, 'shops');    
            }

            //更新処理
            $shop = Shop::findOrFail($id);
            $shop->name = $request->name;
            $shop->information = $request->information;
            $shop->is_selling = $request->is_selling;
            if(!is_null($imageFile) && $imageFile->isValid()){
              $shop->filename=$fileNameToStore;
            }
            $shop->save();
        }
        return redirect()->route('owner.shops.index')->with(['message' => '店舗情報を更新しました。','status'=>'info']);
    }
view

コンポーネントに変数を渡す。
コントローラから変数を渡す場合、bladeファイル側は<x-コンポーネント名 :属性名="$変数名"/>のように書く。
→<x-shop-thumbnail :filename="$shop->filename"/>

bladeコンポーネント側では:属性名を変数とする。今回は:filename。
$filename(アップロードした画像)が空だったらno_imageを返し、なければアップロード先PATHをかえす

<?php
<div>
  @if(empty($filename))
    <img src="{{ asset('images/no_images.jpg')}}">
  @else
  {{-- 画像アップロード先PATH --}}
    <img src="{{ asset('storage/shops/' . $filename)}}">
  @endif
</div>