如何在 Angular 项目中显示保存在 wwwroot (asp.net core) 中的图像答案

【问题标题】：How to display images saved in wwwroot (asp.net core ) in Angular project如何在 Angular 项目中显示保存在 wwwroot (asp.net core) 中的图像
【发布时间】：2020-12-15 16:43:37
【问题描述】：

我正在从事基于 ASP.NET CORE 和 Angular 的个人项目之一。我可以为这个项目指定我有两个独立的项目。

第一个项目只是 Microsoft Visual Studio 中的服务器端（后端代码、控制器和与数据库的链接），第二个项目是 Visual Studio 中的客户端代码（Angular ，打字稿代码）。

所以一个大项目下的两个项目需要是一个在线商店，我有产品和每个产品的一些图片。

我的问题是什么？

我无法获取已经保存在“wwwroot”文件夹中的图像（在后端 - 在第一个项目中 - 在 Visual Studio 中）并将它们显示在客户端（在 Angular 中 - 在前端）。我可以指定我已将图像存储在“wwwroot”文件夹（图像名称和图像本身）中，并且图像名称和图像路径保存在数据库中。你能告诉我从后端获取图像并在前端显示它们的最佳方法是什么？你能给我一些关于如何做到这一点的提示吗？给我你的方法以及如何实现它？

实现了什么？

在这个在线商店中实现了插入新产品（带有名称、描述以及图像本身），它从前端发送到后端并存储在“wwwroot”文件夹（图像本身）中，并保存图像名称和数据库中的图像路径。

如果需要，我可以添加一些代码以便更好地理解，但我只需要一种方法或如何做到这一点的想法。提前谢谢你。

【问题讨论】：

标签： angular asp.net-core frontend backend

【解决方案1】：

wwwroot 中的内容相对于您的应用的基本 URL 应该是可公开访问的。正如documentation 解释的那样：

静态文件可通过相对于 Web 根目录的路径访问。为了例如，Web 应用程序项目模板包含几个文件夹在 wwwroot 文件夹中：

wwwroot

CSS

js

库

考虑创建 wwwroot/images 文件夹并添加 wwwroot/images/MyImage.jpg 文件。访问 a 的 URI 格式图像文件夹中的文件是 https:///images/。例如， https://localhost:5001/images/MyImage.jpg

因此，从您的 Angular 应用程序中，只需按预期使用 URL，例如 https://localhost:5001/images/MyImage.jpg 对应于 wwwroot/images/MyImage.jpg。

【讨论】：

即使我有两个单独的项目，这也能正常工作？这意味着我有两个单独的“wwwroot”文件夹，一个在 Visual Studio Code（Angular - Frontend）中，一个在 Visual Studio Enterprinse 2019（Asp.net core - Backend）中。我还不明白这个解决方案是否也适用于我有分离项目的情况。我是 Angular 的新手，我可以为最终的误解和糟糕的措辞道歉。谢谢你，诺亚斯塔尔。
出于开发目的，您的 ASP.NET Core 项目的内容是 Web 服务器，其中包含您可以通过 Angular 客户端的请求访问的所有内容。您始终可以从其他项目部署文件，但它们必须从某个地方获取。

【解决方案2】：

一个有角度的.html

<img [src]="img"/>

需要

img="myimage.jpg"        //if wwwroot/myimage.jpg
img="images/myimage.jpg" //if wwwroot/images/myimage.jpg

首先看到没有斜线。

【讨论】：

【解决方案3】：

除了接受的答案之外，您还需要配置您的 ApplicationBuilder（在 Startup.cs 中配置方法）：

app.UseStaticFiles();

没有这个，您的 wwwroot 文件夹将无法获得服务。您还可以使用“StaticFileOptions”配置 UseStaticFiles() 以提供与 wwwroot 不同的文件夹。

【讨论】：