I am just wondering, how does it exactly work to retrieve a saved image on filesystem that belongs to some json object? E.g When I'm doing a product creation that has an image and I upload the image together with the newly created product, I usually save the image on my server backend in some folder on the file system and then save the returned image save path and store it as a string field in my product json object.
How does that now work exactly on client side, e.g if I want to retrieve that same image and display it in the image src attribute on the product card and I display it in the browser, it has to look up for the image source on the server's static assets folder (where I stored the image), right?
I saved the image url as a string to my product (which is json data). That image string path has to match the path name to my static folder to actually get the true image. But does that work exactly? I mean that image is byte data and has to be retrieved by the server, and first of all, it has to know where to look for the assets and then parsed and sent them back to the browser, or not (or is the client actually retrieving it somehow behind the scenes)? How does the client do that or what happens on my server when I say:
app.use("/uploads", express.static(path.join(__dirname, '/uploads')))
And does the image retrieving actually work if my frontend is served not from my node.js app directly, and lets say my backend resides on a separate cloud server and my frontend on some other cloud server, how does it retrieve the real images then?
When the client uploads the image to the server, it has to do so in a way that the server is capable of serving that image back to the client at some future time via some known URL. If the server is just dropping the image into a folder on the server and the server is serving all static resources that exist in that folder, then the server just has to know how to reconstruct the URL that will cause the server to find it and serve it from that folder so it can embed that URL in an HTML page it generates. This is just some convention you agree on. The one line of code you show in your question makes it appear that your convention is /uploads/somefilename as the URL.
Note, this has a bit of an issue where if all client uploads are going in the exact same directory, then you have to make sure that no two uploads have the same filename or if you're generating unique filenames on the server when you upload, then the client needs so mechanism for knowing or getting what that filename or URL should so it can request it in the future.
Let's say a client was uploading a profile image that you will want to be able to display later from within a web page. Here would be the steps:
uploads folder. The file is uniquely named as username-profile.jpg where username is the client's unique username in your login system. This guarantees that the filename is unique and can be manufactured for a particular user.<img> tag in the generated web page such as: <img src="/uploads/someusername-profile.jpg">.<img> tag and sends a request to the server for https://yourhost/uploads/someusername-profile.jpg./uploads prefix and lets express.static find someusername-profile.jpg in that directory and when found, stream the image back to the browser.How does that now work exactly on client side, e.g if I want to retrieve that same image and display it in the image src attribute on the product card and I display it in the browser, it has to look up for the image source on the server's static assets folder (where I stored the image), right?
I think this is described in the steps above.
I saved the image url as a string to my product (which is json data). That image string path has to match the path name to my static folder to actually get the true image. But does that work exactly? I mean that image is byte data and has to be retrieved by the server, and first of all, it has to know where to look for the assets and then parsed and sent them back to the browser, or not (or is the client actually retrieving it somehow behind the scenes)?
Your server would generate HTML with an appropriate <img> tag in it that contains a URL that your server will send the desired image when that URL is requested by the browser. So, you embed and <img> tag in the HTML on the server and send that HTML to the client as part of some page request by the browser. Then the browser parses the HTML, finds the <img> tag, gets the src value from that tag and sends another request to the server for that image URL. The server gets that request and your express.static() middleware line of code will match that request to a particular file on your server and send the image data back to the browser. When the browser receives the image data, it will display the image in your web page.
If the client was trying to retrieve the image directly with a Javascript call, the client would have to have some way to know what URL to request from the server such that it would response with the desired image.
what happens on my server when I say:
app.use("/uploads", express.static(path.join(__dirname, '/uploads'))).
That line of code tells Express to take any URL that starts with the /uploads path and look for a filename in your server-side /uploads directory that has the same filename as what is specified in the rest of the requested URL. So, if the requested URL is https://yourhost/uploads/myfile.jpg, then because of the way you have your express.static() middleware stated, it would look in your /uploads folder for the myfile.jpg file. If found, it would take over the http request and would stream the image data back to the client. If not found, routing would continue to other routes and if no match was found in any other routes, express would return a 404 http status.
And does the image retrieving actually work if my frontend is served not from my node.js app directly, and lets say my backend resides on a separate cloud server and my frontend on some other cloud server, how does it retrieve the real images then?
Whomever is generating the HTML that embeds an <img> tag in it that is supposed to contain a src attribute with a URL that corresponds to an actual image has to know what the proper URL is for that image. If the server generating the HTML is a different host than the one serving the image, then it has to generate a URL that points to the appropriate host. If it's the same host, then it can just leave out the domain entirely from URL and the browser will substitute in the domain from the webpage that contains the <img> tag. But, if it's a different host, then you will have to put the entire full URL including protocol and host as in:
<img src="https://mycloudhost/uploads/someimage.jpg">