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

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

Well, after to do:
$ php artisan storage:link
In my component i used:
<img :src="'../storage/img/logo.png'">
thanks,

Answer 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.

Answer 3

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',
],
Save an image:
$image = $request->file('image'); // something like that
$slug = 'some-slug-99';
$image->storeAs(
'examples' .'/'. $slug,
$image->getClientOriginalName(),
'public'
);
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
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 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

Answer 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

Answer 6

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

Answer 7

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;
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.
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.