how to display image in angular saved on node server

Question

I have a nodejs app running on localhost:3000, I uploaded images using multer, so they are in ./uploads/ folder. In the Angular app running on locahost:4200 I want to retrieve those images.

in my for loop:

<tr *ngFor="let data of empData;let i=index">
    <td>{{i+1}}</td>
    <td>{{data.emp_name}}</td>
    <td><img src="./uploads/{{data.emp_image}}"></td>
</tr>

I have all data in following result variable:

this.emp.viewData().subscribe(
  res => {
    this.empData = res;
  },
  err => {
    console.log(err);
  },
)

you have to append the folder or bucket path before the data value to access the image like http(s)://localhost:8080/src/images/data.value — usman saleem
– usman saleem, Commented Jul 8, 2019 at 13:03

Oyewole A. Samuel · Accepted Answer · 2019-07-08 14:09:48Z

2

In addition to the answer above by Software Person, ensure you include this to you node application to enable you access the uploads directory in your nodejs application.

const express   = require('express');
const app       = express();

app.use(express.static('uploads'));

Happy Coding.

answered Jul 8, 2019 at 14:09

Oyewole A. Samuel

2332 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rahul Over a year ago

Thanks for your answer, it helped me a lot.

Software Person · Accepted Answer · 2019-07-08 12:55:29Z

1

You could include your full url like

<tr *ngFor="let data of empData;let i=index">
    <td>{{i+1}}</td>
    <td>{{data.emp_name}}</td>
    <td><img src="http(s)://localhost:3000/uploads/{{data.emp_image}}"></td>
</tr>

Or even better you could define a variable in component and use it like this:

<tr *ngFor="let data of empData;let i=index">
    <td>{{i+1}}</td>
    <td>{{data.emp_name}}</td>
    <td><img src="{{SERVER_UPLOAD_DIR}}/{{data.emp_image}}"></td>
</tr>

edited Jul 8, 2019 at 12:55

answered Jul 8, 2019 at 12:50

Software Person

2,8761 gold badge15 silver badges19 bronze badges

4 Comments

Software Person Over a year ago

Could you add the code of your component and try access the url in your browser if you can access it that way

Rahul Over a year ago

I have access the url through browser it gives the error as follows: Cannot GET /uploads/emp_img-1562410462956.png

Software Person Over a year ago

A 404 I guess, Which means you have uploaded it to a non-public folder. Could you provide your nodejs implementation and your folder structure. So I can give you a solution (just edit your original)

Rahul Over a year ago

Thank u sir, I have fixed it.

Collectives™ on Stack Overflow

how to display image in angular saved on node server

2 Answers 2

1 Comment

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Related