Image not displaying in frontend. Laravel

Question

In my laravel project, I'm trying to show blog posts title and image in a table. The images of the posts are uploaded and stored public/storage. This is the code I use to store images that works

$image = $request->image->store('posts');

in the index.blade.php I use this code to display the posts

Image Title

        <tbody>
        
           @foreach ($posts as $post )

           <tr>
            <td>
            <img src="{{ asset($post->image) }}" width="120px" height="60px" alt="">
            </td>

            <td>
                {{$post->title}}
            </td>
           </tr>
               
           @endforeach

        </tbody>
    
    </table>

In front end images appear broken and I can't seem to fix thatThis is how it shows I have executed php artisan storage:link successfully but still no results. I have added to .env file this line of code aswell FILESYSTEM_DRIVER=public

And this is how my filesystems.php file is looking if this is important

<?php

return [

/*
|--------------------------------------------------------------------------
| Default Filesystem Disk
|--------------------------------------------------------------------------
|
| Here you may specify the default filesystem disk that should be used
| by the framework. The "local" disk, as well as a variety of cloud
| based disks are available to your application. Just store away!
|
*/

'default' => env('FILESYSTEM_DRIVER', 'local'),

/*
|--------------------------------------------------------------------------
| Default Cloud Filesystem Disk
|--------------------------------------------------------------------------
|
| Many applications store files both locally and in the cloud. For this
| reason, you may specify a default "cloud" driver here. This driver
| will be bound as the Cloud disk implementation in the container.
|
*/

'cloud' => env('FILESYSTEM_CLOUD', 's3'),

/*
|--------------------------------------------------------------------------
| Filesystem Disks
|--------------------------------------------------------------------------
|
| Here you may configure as many filesystem "disks" as you wish, and you
| may even configure multiple disks of the same driver. Defaults have
| been setup for each driver as an example of the required options.
|
| Supported Drivers: "local", "ftp", "sftp", "s3"
|
*/

'disks' => [

    'local' => [
        'driver' => 'local',
        'root' => storage_path('app'),
    ],

    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],


    's3' => [
        'driver' => 's3',
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION'),
        'bucket' => env('AWS_BUCKET'),
        'url' => env('AWS_URL'),
        'endpoint' => env('AWS_ENDPOINT'),
    ],

],

/*
|--------------------------------------------------------------------------
| Symbolic Links
|--------------------------------------------------------------------------
|
| Here you may configure the symbolic links that will be created when the
| `storage:link` Artisan command is executed. The array keys should be
| the locations of the links and the values should be their targets.
|
*/

'links' => [
    public_path('storage') => storage_path('app/public'),
    
],

];

Does anyone knows why is this happening, is there a mistake in my code that I don't see?

Answer 1

You can get image using \Storage facade. It will create a link to your storage folder in public folder.

<img src="{{ \Storage::disk('public')->url($post->image) }}" width="120px" height="60px" alt="">

Answer 2

try this,

 <img src="{{ Storage::url($post->image) }}" width="120px" height="60px" alt="">