如何以保存在节点服务器上的角度显示图像

Question

我在 localhost:3000 上运行了一个 nodejs 应用程序，我使用 multer 上传了图像，因此它们位于 ./uploads/ 文件夹中。在 locahost:4200 上运行的 Angular 应用程序中，我想检索这些图像。

在我的 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

除了 Software Person 的上述回答外，请确保将其包含在您的节点应用程序中，以使您能够访问 nodejs 应用程序中的上传目录。

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

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

快乐编码。

Answer 2

您可以包含完整的网址，例如

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