Get image from localhost to localhost with express and nodejs - node.js

Question

I´m building an app with NodeJs and Angular
The server runs on http://localhost:9000
And the app runs on http://localhost:4200
I have an endpoint whose looks like this http://localhost:9000/users
I use this to retrive all users
The set returned has a key like this { photo: myphoto.jpg }
When I loop the set of data, I want to render the image as this way
<img src="{{ url }}/uploads/users/{{ user.photo }}" alt="{{ user.name }} {{ user.last_name }}"
class="img-fluid shadow-sm avatar100 ml-auto mr-auto d-block rounded-circle">
Where url is http://localhost:9000 and user.photo is myphoto.jpg
The complete route is http://localhost:9000/uploads/users/myfoto.jpg
There is the photo hosted, but the server is throwing an error
Cannot GET /uploads/users/myfoto.jpg
I think, the server is interpreting the URL as API route, and obviously is not declared on routes file.
I want to only retrive the image, how could I do that?
I don´t know what part of my code I can show here. Routes? Front-end? Project structure? Tell me what do you need

Answer 1

With Express, you have to create a route that will handle your image URLs. By default, Express (or the built-in node.js web server) does not serve ANY files. So, it will only serve a file if you create a handler for that specific URL and program that handler to deliver the desired file.
If your images are directly in the file system where the URL base filename matches the actual filename in your server file system, you could use express.static() to create a single route that would serve all your images.
For example, you could use express.static like this:
app.use("/uploads/users", express.static("/uploads/users"));
This would allow a URL requested from:
http://localhost:9000/uploads/users/myphoto.jpg
to be automatically served from the server-side file system at
/uploads/users/myphoto.jpg
It would similarly work for any other matching name in that same directory (or even sub-directories of that directory if the sub-directory was also in the URL).
In general, you don't want to surface internal path names such as /uploads/users all the way back to the user's HTML pages. So, you could do this instead in the HTML page:
<img src="/images/myphoto.jpg">
And, this on the server:
app.use("/images", express.static("/uploads/users"));
This will take any http requests that start with a path of /images and look for the matching filename in /uploads/users on the server, thus not exposing the internals of your server directory structure to the client. It creates the notion of an abstract /images URL that your server can then process and get the images from wherever they happen to be stored on the server.

Answer 2

$ npm i multer
and server add
app.use("/public", express.static("public")); //The folder where the file is located