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

您可以添加完整的网址，例如

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

甚至更好的是，您可以在component中定义一个变量并像这样使用它：

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

Answer 2

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

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

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

快乐编码。

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

2 个答案: