Question

我正在使用NodeJ和Angular构建应用程序

服务器在http://localhost:9000

上运行

应用程序在http://localhost:4200

上运行

我有一个端点，其外观如下http://localhost:9000/users 我用它来检索所有用户

返回的集合具有类似{ photo: myphoto.jpg }

的键

当我循环数据集时，我想以此方式渲染图像

  <img src="{{ url }}/uploads/users/{{ user.photo }}" alt="{{ user.name }} {{ user.last_name }}"
    class="img-fluid shadow-sm avatar100 ml-auto mr-auto d-block rounded-circle">

其中url是http://localhost:9000，user.photo是myphoto.jpg

完整路线为http://localhost:9000/uploads/users/myfoto.jpg 有照片托管，但是服务器抛出错误

无法获取/uploads/users/myfoto.jpg

我认为服务器将URL解释为API路由，并且显然没有在路由文件中声明。

我只想检索图像，怎么办？

我不知道我可以在此处显示代码的哪一部分。路线？前端？项目结构？告诉我你需要什么

Answer 1

使用Express，您必须创建一个处理图像URL的路由。默认情况下，Express（或内置的node.js Web服务器）不提供任何文件。因此，仅当您为该特定URL创建处理程序并对该处理程序进行编程以传递所需的文件时，它才会提供文件。

如果图像直接位于URL基本文件名与服务器文件系统中的实际文件名相匹配的文件系统中，则可以使用express.static()创建一条为所有图像提供服务的路由。

例如，您可以像这样使用express.static：

 app.use("/uploads/users", express.static("/uploads/users"));

这将允许从以下位置请求URL：

http://localhost:9000/uploads/users/myphoto.jpg

要从服务器端文件系统自动提供服务，

/uploads/users/myphoto.jpg

对于相同目录中的任何其他匹配名称（如果该子目录也位于URL中，甚至该目录的子目录），同样适用。

通常，您不想一直使用/uploads/users之类的内部路径名，直到回到用户的HTML页面为止。因此，您可以在HTML页面中执行以下操作：

<img src="/images/myphoto.jpg">

而且，这在服务器上：

 app.use("/images", express.static("/uploads/users"));

这将接受所有以/images路径开头的http请求，并在服务器上的/uploads/users中查找匹配的文件名，从而不会将服务器目录结构的内部内容暴露给客户端。它创建了一个抽象/images URL的概念，您的服务器可以对其进行处理，然后从碰巧存储在服务器上的任何位置获取图像。

Answer 2

$ npm i multer

和服务器添加

app.use("/public", express.static("public")); //文件所在的文件夹

使用express和nodejs

2 个答案: