Storage Image Not Show In Blade

Question

I'm working with Laravel 9 and I have an image at the this directory:

projectname/storage/app/dist/captcha/127.0.0.1/0captcha.png

And now I need to load this image at the Blade:

<img src="{{ asset("/storage/dist/captcha/".$ip."/0captcha.png") }}">

But the image does not show!

And when I look for asset("/storage/dist/captcha/".$ip."/0captcha.png") to check what it returns, it prints:

http://localhost:8000/storage/dist/captcha/127.0.0.1/0captcha.png

So what's going wrong here? How can I fix this issue?

Note that I have already ran php artisan storage:link and the [C:\xampp\htdocs\projectname\public\storage] link already exists.

Answer 1

STEPS

1. Set up your dist filesystem disk in the configuration file: config/filesystems.php

<?php

return [

    // ...

    /*
    |--------------------------------------------------------------------------
    | 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 set up for each driver as an example of the required values.
    |
    | Supported Drivers: "local", "ftp", "sftp", "s3"
    |
    */

    'disks' => [

        // ...

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

        // ...

    ],

    /*
    |--------------------------------------------------------------------------
    | 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'),
        public_path('storage/dist') => storage_path('app/dist'),
    ],

];

2. Run the command: php artisan storage:link again to set up the new extra dist symbolic link.

$ php artisan storage:link

   ERROR  The [C:\xampp\htdocs\projectname\public\storage] link already exists.

   INFO  The [C:\xampp\htdocs\projectname\public\storage/dist] link has been connected to [C:\xampp\htdocs\projectname\storage\app/dist].  

3. Access your assets in the View as usual:

<img src="{{ asset("/storage/dist/captcha/".$ip."/0captcha.png") }}">