【laravel】画像の読み込みがうまくいかない

Question

質問

画像を送るとそれを受けとって表示する機能を作成したいのですが、画像のように読み込みがうまくいかない

やっていること

1.メモ内容[content],画像[image],URL[url]を入力する
2.'/content'で表示する
3.編集するボタンで1の内容を編集することができる（edit.blade.php）(updateメソッド)
4.3で編集した内容を'/content'で表示する

問題：4で表示する画像が????参照画像のようになる

以下、コードを添付いたします

content.blade.php

@extends('layouts.app')

@section('content')
<div class="row justify-content-center ml-0 mr-0 h-100">
    <div class="card w-100">
        <div class="card-header">メモの内容</div>
        <div class="card-body">
                      {{ $memo['content'] }} 

                     <br>
                     <img src="{{ '/storage/' . $memo['image']}}" class='w-100 mb-3'> 

                    <br>

                <!-- URLをaで表示する -->

                <a href ="{{ $memo['url'] }}"> {{ $memo['url']}}  </a>

                <br>

                <a href ='/home' class="btn btn-primary btn-lg" style ='width:90px'>戻る</a>
            </form>
        </div>
    </div>
</div>
@endsection

edit.blade.php

@extends('layouts.app')

@section('content')
<div class="row justify-content-center ml-0 mr-0 h-100">
    <div class="card w-100">
        <div class="card-header">メモ編集</div>
        <form method = 'POST' action = "/delete/{{ $memo['id'] }}" id = 'delete-form'>
            @csrf
            <button><i id = 'delete-button' class = "fas fa-trash"></i></button>
        </form>
            <div class="card-body">
            <form method='POST' action="{{route('update',['id' => $memo['id']] ) }}">
                @csrf
                <input type='hidden' name='user_id' value="{{ $user['id'] }}">
                <div class="form-group">
                     <textarea name='content' class="form-control"rows="10">
                         {{ $memo['content'] }}
                    </textarea>

                    
                    <div class="form-group">
                    <form method='POST' action="{{route('update',['id' => $memo['id']] ) }}" enctype="multipart/form-data">
                    <label for="image">画像のupload</label>
                    <input type="file" class="form-control-file" name='image' id="image">
                </div>
                    
                        <!--URLをとってくる-->
                    <div class="mb-3">
                    <form method='POST' action="{{route('update',['id' => $memo['id']] ) }}">
                        <label for="disabledTextInput" class="form-label">URLの入力してください</label>  
                        <input type="text" id="disabledTextInput" class="form-control" name='url' placeholder="URL">
                    </div>

                </div>
                <div class="form-group">
                </div>
                <button type='submit' class="btn btn-primary btn-lg">更新する</button>
                
            </form>
        </div>
    </div>
</div>
@endsection

HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use \App\Memo;
use \App\User;


class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        //↓でログインしているユーザの情報を渡す
        $user = \Auth::user();
        //ここでメモの中身をログインしているアカウントのIDと一致させないといけない
        $memos = Memo::where('user_id',$user['id'])->where('status',1)->get();
        //dd($memos);
        return view('home',compact('user','memos'));
    }

    public function memo()
    {
        $user = \Auth::user();

        return view('memo',compact('user'));
    }

    public function store(Request $request)
    {
        $data = $request->all();
        //dd($data);
        $image = $request->file('image');

        if($request->hasFile('image')){
            $path = \Storage::put('/public', $image);
            $path = explode('/', $path);
        }else{
            $path = null;
        }
        // POSTされたデータをDB（memosテーブル）に挿入
        // MEMOモデルにDBへ保存する命令を出す
        $memo_id = Memo::insertGetId(
            ['content' => $data['content'],
            'user_id' => $data['user_id'],  
            'image' => $path[1],
            'url' => $data['url'],
            'status' => 1]);
    
        // リダイレクト処理
        return redirect()->route('home');
    }

    public function edit($id){
        $user = \Auth::user();
        
        $memo = Memo::where('status','1')->where('id',$id)->where('user_id',$user['id'])->first();
        
        $memos = Memo::where('user_id',$user['id'])->where('status',1)->orderBy('updated_at','DESC')->get();
        
        return view ('edit',compact('memo','user','memos'));
    }

    public function update(Request $request , $id){
        $inputs = $request->all();
        //dd($inputs);
        
        Memo::where('id',$id)->update(['content' => $inputs['content'],
                                       'image' => $inputs['image'],
                                       'url' => $inputs['url']
                                    ]);
                                    
        return redirect()->route('home');
    }
    
    public function content($id){
        $user = \Auth::user();
        $memo = Memo::where('status','1')->where('id',$id)->where('user_id',$user['id'])->first();

        $memos = Memo::where('user_id',$user['id'])->where('status',1)->orderBy('updated_at','DESC')->get();
        
        return view ('content',compact('memo','user','memos'));
    }

    public function delete(Request $request , $id){
        $inputs = $request->all();
        //dd($inputs);
        Memo::where('id',$id)->update([ 'status' => 2 ]);

        return redirect()->route('home')->with('success','メモの削除が完了しました');
    }


}

Comments

[skys215]

https://readouble.com/laravel/8.x/ja/filesystem.html
ドキュメントの公開ディスク部分は見ましたか？

[yoshioka01]

php artisan storage:llinkでpublic/storageに画像が入るようにしてあります

[m.ts10806]

でも、その日本語訳ドキュメントにあるようにasset()でアクセスしてないので違うところを指してるのではないでしょうか。

> ファイルを保存し、シンボリックリンクを作成したら、assetヘルパを使用してファイルへのURLを作成できます。

Answer 1

$filename = Storage::disk('public')->putFile('images', $image); でstorage/app/publicに保存する事ができます。

プロジェクトでは/storage/app/publicフォルダーが基準となり、storage:linkした後のファイルはURLでは/storageが基準です。
asset()はexample.com/(/publicフォルダー)が基準なので、/public/storage/images(既に/storage/app/public/images)にある$filenameイメージはasset('/storage/images/'.$filename)でURLを作成できます。