How to access image from /storage -laravel- from SPA with vuejs

1. Check config/filesystems.php (ie: unmodified default):

    // If server doesn't support "making symbolic links":
    // https://medium.com/@shafiya.ariff23/how-to-store-uploaded-images-in-public-folder-in-laravel-5-8-and-display-them-on-shared-hosting-e31c7f37a737
    'public' => [
        'driver' => 'local',
        'root' => storage_path('app/public'),
        'url' => env('APP_URL').'/storage',
        'visibility' => 'public',
    ],

2. Save an image:

   $image = $request->file('image'); // something like that
   $slug = 'some-slug-99';

   $image->storeAs(
       'examples' .'/'. $slug,
       $image->getClientOriginalName(),
       'public'
   );

3. Create the symlink from /storage/app/public to public/storage (ie: your public html folder which makes asset() work in Laravel Blade templates, I think but don't quote me on that)

$ php artisan storage:link

4. Place the HTML in your Vue component:

<img
    v-for="image in example.images"
    :key="image.filename"
    :src="`/storage/examples/${example.slug}/${image.filename}`"
>

Also, read the docs: https://laravel.com/docs/8.x/filesystem

When you use the storage:link command, you create a symbolic link between your storage/app/public folder and your public/storage folder.

So now you can find your files at the url $BASE_URL/storage/img/logo.png.

I recommend you to use the asset helper function inside your blade template:

<img src="{{ asset('storage/img/logo.png' }}">

NOTE: be sure to set the proper file permissions on the folder or you get an Unauthorized error when trying to access it.

When using php artisan storage:link you are creating a simbolic link from public/storage to storage/app/public

I'm used to use asset instead regular path: Try using src="{{ asset('storage/app/public/img/logo.png') }}

It is supposed that if you are using a SPA, when a component renders, it will make a new request to get the img

Hope my answer will help someone, Create a symbolic link by using this command

php artisan storage:link

now use it in you vue template as following

/storage/path/to/file

routes/web.php

For SPA application, Laravel usually render index blade for all incoming requests.

Route::get('/{any}', function () {
    return view('index');
})->where('any', '.*');

I changed this route so that all routes except "/storage/**/." locate index blade page. This way, you can both render SPA and get uploaded image.

Route::any('{all}', function () {
    return view('index');
})->where('all', '^(?!storage).*$');

I assume you have already created symlink using php artisan storage:link command.
Take a look Vue js laravel 8 routing

I don't know why no one write their solution clear. In Laravel and vuejs When you store files inside laravel storage do as bellow;

1. create a symlink by running php artisan storage:link it will create a directory inside your-project/public by the name of storage which is not actually a directory that is a link to project/storage directory, if you navigate to your-project/public you will see all the files uploaded into your storage showing here, now you cannot access your file directly from here.
2. If you have an image stored in this location: storage/app/public/files/logo.png the path to show the image in vue a component will be /storage/files/logo.png please escape app/public parts. <b-avatar href="#" :src="'/storage/files/logo.png'"></b-avatar> I hop it help someone.