Laravel 6.＊でimageが表示できない

Question

初学者です。Laravel(6.20.16) uiを使って、ユーザーからinputで取得した画像を投稿する機能を実装しようと考えています。取得した画像はRequestでバリデーションした後、ControllerでDBに保存され、bladeで表示されるようにする流れを考えています。

投稿画面__create.blade.php__

<div class="col-md-6 mb-4">
<form method="POST" enctype="multipart/form-data"action="{{ route('articles.store') }}">
  @csrf
          <div class="file-field">
           <div class="d-flex justify-content-center">
              <div class="btn btn-mdb-color aqua-gradient btn-rounded float-left">
                <span>アルバムから選択</span>
                <input type="file" name="image">//画像取得
              </div>
            </div>
          </div>
      </div>
<button type="submit" class="btn  btn-block">投稿する</button>
</form>

取得した画像を__LetterRequest__でバリデーション

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class LetterRequest extends FormRequest
{
    //略
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'image' => 'file|image|max:10000|present|nullable|sometimes',            
        ];
    }

//以下略

バリデーションした画像を、__LetterController__でDBに格納。
まずpublicディレクトリに保存し、それからDBに入れるような流れです。
（画像はファイル名とパスを取得して保存するようにしました。）

if(isset($request->image)) //画像が存在したら
      {
        $request->image = $request->file('image')->store('public/images');
        $request->image = str_replace('public/images/', '', $image);//publicディレクトリに格納
        $letter->file_name= $request->image->getClientOriginalName();//ファイル名と
        $letter->file_path = $request->image->getRealPath();//パスを取得し、DBに保存
        then(move($request->file_path,'public/images'));
      } 
      else{
      } ;
      $letter->save();
　　　return redirect()->route('articles.index');
//以下略

そして、DBからデータを取り出して表示します

<div class="container">
@foreach ($letters as $letter)
    <div class="card">
      <div class="bg-image hover-overlay ripple"  data-mdb-ripple-color="light">
        <img
          class="img-fluid" src='{{$letter->file_path}})'
        />
      </div>
//以下省略

しかし、い表示してみると、画像はうまく表示されず、表示されなかったとき用のいつものテンプレマークが表示されるだけです。DBをみると、投稿画面から取得した画像のファイル名、パス共に正しく格納されていました。

また、実装途中でシンボリックリンクを行うことでpublicにstorageファイルが生成され、画像がそこに保存されると知ったので、CLIでphp artisan storage:linkを行いました。しかし、エディタ上にはstorageファイルは見当たりません。エクスプローラーで確認するとstorageファイルがpublicディレクトリの中に生成されていたので、直接エディタの中にコピペしようと思いましたが、エラーが表示されコピペできませんでした。
Error: EACCES: permission denied, stat Cドライブ～
ググってみると認証を緩和することが必要と書かれていたので、CLIで
__ chmod -R 777 storage__
を叩きましたが、効果なしでした。

どこかのコードを誤って記述している可能性が高いのかなと思うのですが、私のバカ頭ではどうしようもできませんでした。どなたかご教授頂けると幸いです。よろしくお願いします。

Answer 1

ご回答ありがとうございます！
どうやらDocker周りとの連携ミスのようです…提示していただいたコード、熟読させていただきます。
詳細なご教授ありがとうございます。

Answer 2

アクションで、アップロードされたファイルの処理が少しおかしい気がしています。
以下のような感じにするのは不都合がありますか？

if(isset($request->image)) //画像が存在したら
{
    // アップロードファイルを storage/app/public/images/ ディレクトリへ保存
    $path = $request->file('image')->store('public/images');

    // ファイルの元の名前と保存先のパスを Letter へセット
    $letter->file_name= $request->file('image')->getClientOriginalName();
    $letter->file_path = $path;
}

// 中略

$letter->save(); // Letter を保存

参考: ファイルアップロード

Letterモデルでは、ファイルURLを取得できるようなアクセサを定義しておくと良いと思います。

use Illuminate\Support\Facades\Storage;

// 中略

    /**
     * ファイルURLを取得
     *
     * @return string
     */
    public function getFileUrlAttribute()
    {
        return Storage::url($this->file_path);
    }

参考:

• ファイルURL
• アクセサの定義

Bladeで以下のように記述すると、上記のアクセサが呼び出され、ファイルURLを取得できます。

<img class="img-fluid" src="{{ $letter->file_url }}">