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

Question

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

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

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

层次结构如下：

• 项目
  • 后端（NojdeJS）
    • 图片
      • image.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

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

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

首先，将您的图像文件夹移动到公共文件夹。

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

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

访问图像

Answer 2

错误在于使用以下行：

我想访问公共文件夹，但是当我的公共文件夹位于 public/users_imgs 时，该路径是 src/public/users_imgs。 Si 我用过这个：

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

我也试过这个，但它不起作用，不知道为什么：

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

然后，在 src 中设置 public 文件夹：

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

Answer 3

你应该使用：

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

注意：../public 而不是 public