как отобразить изображение в угловом виде на сервере узла

Question

У меня есть приложение nodejs, работающее на localhost: 3000, я загрузил изображения, используя multer, поэтому они находятся в папке ./uploads/.В приложении Angular, запущенном на locahost: 4200, я хочу получить эти изображения.

в цикле for:

<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>

У меня есть все данные в следующей переменной результата:

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

Answer 1

В дополнение к ответу вышеприведенного лица, ответственного за программное обеспечение, убедитесь, что вы включили это приложение для своего узла, чтобы получить доступ к каталогу загрузок в своем приложении nodejs.

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

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

Happy Coding.

Answer 2

Вы можете включить свой полный URL-адрес, например

<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>

Или даже лучше, вы можете определить переменную в компоненте и использовать ее следующим образом:

<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>