如何使用 NodeJS 服务器和 Angular Front 获取图像？

Question

我有一个问题...当我尝试获取保存在服务器上的图像以在前端查看时，路由失败。

当我注册一个用户时，我将用户图片保存在服务器中Multer，并将服务器图片路径保存在数据库的用户信息中。

从前端，当我得到一个数据库用户时，我尝试显示他们的个人资料照片，但我发现该文件夹不存在。

层次结构如下：

• 项目
  • 后端（NojdeJS）
    • 图片
      • 图片.jpg
  • 前端（角度）
    • Angular 项目

我想从前端访问后端文件夹，但出现以下错误：

GET http://localhost:4200/backend/users_imgs/image.jpg 404 (Not Found)

目前，我这样称呼图像：

<img src="../../../../../../backend/users_imgs/image.jpg" alt="">

编辑

根据@Ashish Yogi 的建议，我做了这个：

我背着这个：

app.js

我的前面有这个：

虽然路径是这里，但真正的路径是 users_imgs

如下图所示，我的服务器端口是“4000”：

Answer 1

错误在于使用以下行：

我想访问公用文件夹，但当我在 public/users_imgs 中有我的公用文件夹时，该路径是 src/public/users_imgs。我用过这个：

app.use(express.static('public'))

这个我也试过了，但是不行，不知道为什么：

app.use('/users_imgs', express.static('public'))

还有，在 src 中设置公用文件夹：

app.use('/users_imgs', express.static(__dirname + '/public'));

Answer 2

你应该使用：

app.use(express.static(path.join(__dirname, '../public')));

请注意：../public 而不是 public

Answer 3

您的图像存在于服务器文件夹中，并且您正试图从 Angular URL 获取它。这就是它无法访问的原因。

您需要允许从节点服务器访问您的图像。

首先，将您的 imges 文件夹移动到公用文件夹。

您的节点结构将如下所示：

BackEnd (Node)
public
imges
image.jpg

您可以通过以下代码允许使用公用文件夹：

var express = require('express');
var path = require('path');
var app = express();
//serve public files
app.use(express.static(path.join(__dirname, 'public')));

现在您可以使用http://localhost:SERVER_PORT/imges/image.jpg 访问图像