Angular 5：如何访问应用程序或资产文件夹之外的图像文件？

Posted 2023-03-15

【中文标题】Angular 5：如何访问应用程序或资产文件夹之外的图像文件？

【英文标题】：Angular 5: How do I access image files outside the app or assets folder?

【发布时间】：2019-05-10 11:47:19

【问题描述】：

我有用户可以上传图片的应用程序。我读到我需要在编译这些文件夹时将这些文件上传到应用程序或资产文件夹之外。 我的应用程序文件夹结构如下所示：

用户文件应该进入媒体文件夹。现在我有示例文件media/user/default_dp.jpg，但是如何在组件模板中访问这个文件？只写

`<div class="my-dp dp rounded-circle" [ngStyle]="'background-image':url(./media/user/default_dp.jpg)'">`

不能解决问题。

【问题讨论】：

media 是源文件夹的目录。生产中部署的不是您的源文件夹。当您在应用程序中提交表单时，您会将提交的数据存储在数据库中，对吗？要查阅这些数据，您有一个 REST 服务允许获取这些数据，从而通过 HTTP 公开存储在数据库中的数据，对吗？好吧，上传的图像应该以同样的方式处理：你将它们存储在某个数据库中（这可能是服务器中组织良好的文件夹），并通过 HTTP 公开它们，你编写一个读取图像并提供服务的 REST 服务HTTP。

您是否在寻找包含其他文件夹，例如 ***.com/questions/39538464/… ？

@Eliseo 如果我在资产之外的配置文件中包含 media 文件夹，是否意味着现在编译器编译它？

【参考方案1】：

您不应该（在这种情况下）将它们视为您应用的一部分。将这些媒体文件视为来自后端的东西。

上传的文件与您的 Angular 应用完全分离。您的“服务器”文件夹可能会有类似的内容（或者更好的是，将其完全移出源代码）。您的服务器需要在上传时将文件放在可公开访问的地方，或者提供一个端点来服务这些文件。无论这个后端服务器为您提供什么，您都可以从中获取它。

【参考方案2】：

你可以试试：

<div class="my-dp dp rounded-circle" [ngStyle]="'background-image': './media/user/default_dp.jpg'"></div>

【讨论】：

缺少的 ' 只是错字，它会被自动忽略/修复。那没有成功。