Vue production images folder is not updating?

Question

I have a vue web app where you can upload images. When I was creating it, I was running it on localhost with hot-reload on.

However, when I hosted my app at digitalocean and used this command (npm run build) I faced a problem. As far as I understand it, vue had built my app, and then started ignoring new files.

I've already tried to put the uploads folder outside of vue app but it didn't help me.

How to upload images and dynamically be able to access them?

By the way my stack is: Vue.js (frontend), Laravel (backend) and nginx.

score 0 · Accepted Answer · edited Apr 13 '21 at 06:12

0

The Vue frontend has to be built (creating a "dist" folder) every time you wish to see a change.

Either host the images on your DigitalOcean droplet or a database.

Simple way to accomplish self-hosting of the images with 2 APIs (POST, GET):

1. Send image frontend -> backend

2. Save image backend -> droplet (parse the image with Laravel and save to a directory on your server)

3. Send image backend -> frontend OR use image's location on the server as your "src" (whichever method is necessary in your app)

Or serve your images using nginx: How to serve images with nginx

edited Apr 13 '21 at 06:12

thmspl

2,437
3
22
48

answered Apr 07 '21 at 01:25

kuntervert

86
1
9

You mean I have to locate uploads folder outside of the project? My project is located in /var/www/html/project/ – Tyoma Inagamov Apr 07 '21 at 12:08
you can upload it to for example /var/projectFiles or something – kuntervert Apr 07 '21 at 17:42
It didn't help me. The file was successfully uploaded, but vue client can't see it – Tyoma Inagamov Apr 08 '21 at 18:53
1

If youre using nginx, then follow this thread to serve images: https://stackoverflow.com/questions/18954827/how-to-serve-images-with-nginx – kuntervert Apr 10 '21 at 18:47

Vue production images folder is not updating?

1 Answers1