[Vuejs]-Laravel vue – upload image and retrieve it

Frontend couldn’t access filesystem as "/storage/public/FILENAME.jpg".

If you are based on Laravel 9.x, and didn’t change any filesystem default settings, your file will stored under "<project root>/storage/app/public/", it’s filesystem default path, but frontend can only access your "<project root>/public/" folder, do check list as below might help you slove issue.

1.Make sure you executed php artisan storage:link command, and it will created a symbolic link from your storage path to public path.

If you didn’t change settings, it will create link from "<project root>/storage/app/public" to "<project root>/public/storage", once you done command you can see your storage folder under public folder.

You can access "<APP_URL>/storage/FILENAME.jpg" to see if link create success or not, if you ain’t get 404 means your link created as well as it should be.

2. Use laravel helper to generate storage url.

Use the asset() helper create a URL to the files.

Your files will under "<project root>/public/storage" after step 1, and your nginx root will access public as default, so you don’t need public as your url path anymore.

asset('storage/FILENAME.jpg');
// output will be "<APP_URL>/storage/FILENAME.jpg"

3. (Not required) Check if laravel cached your view.

For some new developer of laravel didn’t notice that laravel will cached your view, and they keep thinking that code doesn’t work.

You can easily check if laravel cached view by php artisan about command if you are using latest laravel version, and use php artisan view:clear to clear view cache.