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

Question

if i put an image in "storage/app/public/img/logo.png" and execute: 

$ php artisan storage:link

How i get that logo.png in vue component?

<img src="storage/app/public/img/logo.png">

The requested it's ok (200) but that image not render, because is an SPA.

Thank you,

Answer 1

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

Answer 2

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