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

Question

我正在开发一个基于 ASP.NET CORE 和 Angular 的个人项目。我可以指定对于这个项目我有两个单独的项目。

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

因此，一个大项目下的两个项目需要是一个网上商店，我在那里有产品和每种产品的一些图像。

我的问题是哪一个？

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

实施了什么？

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

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

Answer 1

wwwroot 中的内容应该相对于应用程序的基本 URL 是可公开访问的。正如文档所解释的：

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

• wwwroot
  • CSS
  • js
  • 库

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

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

Answer 2

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

app.UseStaticFiles();

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