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,

Solution 1

Well, after to do:

$ php artisan storage:link

In my component i used:

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

thanks,

Solution 2

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.

Solution 3

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

Solution 4

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

Solution 5

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

View more solutions

Comments

[yehanny]

This is the best answer it worked for me after running php artisan storage:link then I used in my img path :src="'./storage/profile/' + member.profile_pic" where profile is my folder inside storage/app/public/profile and member.profile_pic is my image. Great THANKS!

[jjmu15]

This only works when using blade templates. The original question was asking about accessing the images within a SPA written in Vuejs so this answer is irrelevant and answering a different question

[Fernando Torres]

Great, thanks! This works!

[T.melz]

What's the workaround for a vuejs frontend that is built using vue-cli and is separate from the laravel backend but both served using the same domain?. eg. vuejs-frontend -> /var/html/vuejs/dist laravel-backend -> /var/html/laravel-backend