di3po's avatar
Level 1

Is there a way to get proper path to image in public storage from vue?

I have done php artisan storage:link. So in .vue page the image can't be found by path: :src="'/./storage/'+question.image". The image is uploaded in db: qImagess/imageName. And stored in storage/app/qImagess. The browser is throwing 404: 127.0.0.1:8000/storage/qImagess/1385873137.png. It's not even showing with direct src="/storage/qImagess/1385873137.png". Both with and without /storage. How to display it properly?

0 likes
12 replies
Sinnbeck's avatar

@di3po Check the path on your computer. Can you find the image in /public/qImagess

alqahtani's avatar

@di3po do you have the images inside storage/app/qImagess ? also is there a link to it in public/qImagess ?

di3po's avatar
Level 1

@alqahtani Yes. I can't upload screenshot for some reason. It's attached here: stackoverflow.com/questions/71420771/is-there-a-way-to-get-proper-path-to-image-in-public-storage-from-vue. In public folder I have symbolic link to storage as could be shown in screenshot.

di3po's avatar
Level 1

@Sinnbeck In public folder I have symbolic link to storage as could be shown in screenshot. But I can't upload screenshot for some reason. It's attached here: stackoverflow.com/questions/71420771/is-there-a-way-to-get-proper-path-to-image-in-public-storage-from-vue

alqahtani's avatar

@di3po the storage:link didn't created the link to qImagess for you. try:

php artisan config:clear
php artisan storage:link

and don't forget to add this to filesystems.php before:

'links' => [
   ...
    public_path('qImagess') => storage_path('app/qImagess'),
],

also the link should be: :src="'/' + question.image"

di3po's avatar
Level 1

@alqahtani ok, I did

php artisan config:clear
php artisan cache:clear
php artisan migrate:refresh
php artisan db:seed
php artisan storage:link
php artisan serve

In that order. No results. And the links

:src="'/'+question.image"
:src="''+question.image"
:src="'/storage/'+question.image"
:src="'/storage/app'+question.image"

don't work. My filesystems.php

...
'disks' => [
        'links' => [
            public_path('qImagess') => storage_path('app/qImagess'),
        ],

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
        ],

    ],
...
Sinnbeck's avatar

@di3po You only need to watch the public folder and check if a new folder (symlink) shows up. Ignore everything else.

1 like
alqahtani's avatar
Level 15

@di3po links should be outside disks array

you can find it at the end of the file

1 like
di3po's avatar
Level 1

@Sinnbeck Thank you, sir! Yes, now there is created new folder with uploaded images.

Please or to participate in this conversation.