CODEWITHSUNDEEP
node.jsangularexpresshttp
Alberto Siurob
Alberto Siurob

Reputation: 227

Get image from localhost to localhost with express and nodejs

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

Upvotes: 0

Views: 7704

Answers (2)

Anujin Bayar
Anujin Bayar

Reputation: 1

$ npm i multer

and server add

app.use("/public", express.static("public")); //The folder where the file is located

Upvotes: 0

jfriend00
jfriend00

Reputation: 707476

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.

Upvotes: 1

Related Questions