Laravel8での画像投稿機能の実装について

Question

お疲れ様です。
質問お願いします。

現在、Laravel8で日記アプリを作っていて、画像投稿機能を実装しているところです。

PostControllerでstoreアクションまでは実装し、データを挿入してみたところ、データベースのカラムにはpublic/image/3A2292DF-0BC9-4666-817D-C821D755A22F.jpegのようにデータは保存されている状態です。

ですが、index.blade.phpで表示させてみても画像のところだけ表示されません。

おそらく<img src="{{ Storage::url($post->picture) }}" class="card-img-top" alt="...">が間違っているのというのは分かるのですが、ググっても公式ドキュメントをみても解決しないのでご教授お願いします。

＊下記は参考にしたサイトになります
「公式リファレンス」Laravel 8.x ファイルストレージ
画像アップロード機能を投稿フォームにつける【初心者のLaravel入門講座】

<div class="row row-cols-1 row-cols-xl-3 g-4">
    @foreach ($posts as $post)
    <div class="col">
        <div class="card h-100"><img src="{{ Storage::url($post->picture) }}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">{{$post->title}}</h5>
                <p class="card-text">{{$post->diary}}</p>
                <a href="/posts/{{$post->id}}">詳細を表示</a>
                <a href="/posts/{{$post->id}}/edit">編集する</a>
                <form action="/posts/{{$post->id}}" method="post">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" value="delete">
                    <input type="submit" name="" value="削除する">
                </form>
                {{-- <a href="/posts/{{$post->id}}">削除する</a> --}}
            </div>
            <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div>
        </div>
    </div>
    @endforeach
</div>

    public function store(Request $request)
    {
      $post = new Post;

      // $requestにformからのデータが格納されているので、以下のようにそれぞれ代入する
      $inputs = request()->validate([
        'picture'=>'image',
        'title'=>'required|max:255',
        'diary'=>'required|max:255',
      ]);

        // 画像ファイルの保存場所指定
        if(request('picture')) {
          $filename = request()->file('picture')->getClientOriginalName();
          $inputs['picture'] = request('picture')->storeAs('public/image', $filename);
      }

      // 保存
      $post->create($inputs);
      // 保存後 一覧ページへリダイレクト
      return redirect('/posts');
    }

Answer 1

php artisan storage:link
は実行されていますか？

---

• storage/app/public/images にファイルが保存されているか
• レンダリングされた画像URLは　ドメイン名+/storage/images/　であってるか

を確認してみてください

Comments

[nakatievent]

はい！
実行しています！

試しにもう一回実行してみると、

# php artisan storage:link
The [/work/public/storage] link already exists.
The links have been created.

のように実行済みと出ます。

[nakatievent]

①「storage/app/public/images」にファイルが保存されているか
→「storage/app/public/image」に保存されています。

②「レンダリングされた画像URLは　ドメイン名+/storage/images/〇〇　であってるか」
→レンダリングって画像を投稿した後のページという認識で大丈夫ですよね？
であれば「<img src="/storage/image/〇〇.jpeg" class="card-img-top" alt="...">」で合ってます！

すいません！
画像投稿してみたら今度は反映されてました！
色々と教えてくれてありがとうございます????‍♂️

宜しければもう一つ教えていただきたいのですが、画像投稿する際に、投稿できる形式とできない形式があります。

具体的には、
「〇〇.jpeg」の形式は投稿できますが、
「〇〇.heic」の形式は投稿できません。

調べてみたところ、「〇〇.heic」の形式はiOS11のファイル形式でブラウザで表示できないみたいなので、 heic形式をjpeg形式に変換する「ImageMagick」をdockerに組み込みたいのですが、組み込むコンテナはPHPのコンテナで大丈夫ですか？

[mikkame]

はい、phpコンテナで大丈夫です

[nakatievent]

ありがとうございます！

また何かありましたら宜しくお願いします。