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

Well, after to do:

$ php artisan storage:link

In my component i used:

<img :src="'../storage/img/logo.png'">

thanks,

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.

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