Image not showing ?

Image is uploaded into database properly but it does not showing in my index file. plz, anyone can tell me why this is not showing an image. This is my output, click the link https://imgur.com/9nqp8hz

And my database fields are: https://imgur.com/3QmGr56 This is my controller

<?php

namespace App\Http\Controllers;

use App\mediaLibrary;
use Illuminate\Support\Facades\File;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class MediaLibraryController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $profiles = mediaLibrary::all();

        return view('mediaLibrary.index', compact('profiles'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        request()->validate([
            'image' => 'required',
        ]);

        $image = $request->file('image');
        $extension = $image->getClientOriginalExtension();
        Storage::disk('public')->put($image->getFilename().'.'.$extension,  File::get($image));

        $picture = new mediaLibrary();
        $picture->mime = $image->getClientMimeType();
        $picture->original_filename = $image->getClientOriginalName();
        $picture->filename = $image->getFilename().'.'.$extension;
        $picture->save();

        return redirect()->route('media.index');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\mediaLibrary  $mediaLibrary
     * @return \Illuminate\Http\Response
     */
    public function show(mediaLibrary $mediaLibrary)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\mediaLibrary  $mediaLibrary
     * @return \Illuminate\Http\Response
     */
    public function edit(mediaLibrary $mediaLibrary)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\mediaLibrary  $mediaLibrary
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, mediaLibrary $mediaLibrary)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\mediaLibrary  $mediaLibrary
     * @return \Illuminate\Http\Response
     */
    public function destroy(mediaLibrary $mediaLibrary)
    {
        //
    }
}

and this is my index file

    <section class="content">
        <div class="row">
            @foreach($profiles as $profile)
            <div class="card m-4" style="width: 18rem;">
                <img class="card-img-top" src="{{Storage::disk('public')->url('uploads/'.$profile->filename)}}" alt="{{$profile->filename}}">
                    <a href="#" class="btn btn-primary float-right">Delete</a>
                </div>
            </div>
            @endforeach     
        </div>
    </section>