当图像存储在 node.js 服务器上传文件夹中时，如何在 angular 应用程序中显示图像？

Question

我有一个node.js服务器（单独的目录），我将文件保存在uploads文件夹中，并将图像路径保存在db中。 我的node.js服务器中有以下目录结构

node_modules
src
uploads
 |category-name-folder
    |image-name.jpg
 |category-name-folder
    |image-name.jpg
package.json

我在db中保存image path ，就像这样uploads/category-name/image-name.jpg 。

现在我想在angular应用程序中显示所有images 。 所以请指导我如何将这些图像显示到angular应用程序？ 我应该通过Api将image paths发送到angular应用程序吗？ if yes so what complete url should i send to angular app and what url should i bind in angular app img src ?

注意：我有一个单独的客户端应用程序目录结构(angular)

Answer 1

基本上，您需要做的是在节点服务器中创建一个 GET 端点以返回图像，例如：

[GET]images/{folder}/{imageName}

而不是保存图像路径，您可以保存 URL 来调用该端点：

uploadedObj {
 url : config.domain + 'images/' + folder + '/image.jpg'
 }

然后当你在你的 angular 中获取数据时，你将那个值直接放在图像 src 中。

<img src="{{ upload.url }}" *ngFor="let upload of uploads"/>

Answer 2

在服务器端（Nodejs），静态提供上传文件夹。 向 Angular 发送图像路径并将其作为图像源。

<img [src]="imagePath">

图像源应该类似于“YOUR_DOMAIN/uploads/filename”。 这是您的情况所必需的，因为您在单独的域（服务器）中提供 angular index.html。

如果您使用快递，请使用此链接