来自本地硬盘的 Angular 2 图像绑定答案

【问题标题】：Angular 2 Image Binding from the local hard disk来自本地硬盘的 Angular 2 图像绑定
【发布时间】：2023-03-28 01:36:02
【问题描述】：

我在将图像路径绑定到角度 2 中的 img src 时遇到问题。我将图像保存在本地磁盘中并将路径保存在数据库中并检索图像路径并绑定到 img 源标签，但它没有绑定。我尝试将本地磁盘 url 直接绑定到图像标签，然后我收到错误“不允许加载本地资源。”，如果我将本地路径值绑定到 SafeUrl 变量 那么错误是 unsafe:E:\Main Projects\img\20182201521541566536.jpg:1

谁能给我一些解决方案。谢谢

【问题讨论】：

标签： angular angular2-template angular2-forms angular2-services

【解决方案1】：

您无法从硬盘驱动器中读取文件作为图像源。您需要在项目中提供图像，以便它们在 localhost 上可用。

【讨论】：

我有用户上传图片的场景。我将这些图像保存在项目文件夹本身中，但是在构建 angular 2 之后，只有图像显示在图库中，否则它显示错误“找不到文件”

【解决方案2】：

以下对我有用

步骤 1 ) 从 '@angular/platform-browser' 导入 { DomSanitizer }；

步骤2）然后在构造函数中添加依赖项 public _DomSanitizationService: DomSanitizer

第 3 步）现在将属性绑定为

this.ImagePath = this._DomSanitizationService.bypassSecurityTrustUrl(this.FilePath);

【讨论】：

【解决方案3】：

我还有另一种解决方案，它对我有用。我们可以在 IIS 上托管我们的图像，然后我们可以提供 IMG 标签的 SRC 的 http 路径。当您将代码部署到任何实时服务器时，您必须根据实时服务器设置传递图像的 http 路径。浏览器认为那些没有附加 http 的 URL 是不安全的。

如果有人仍然发现任何问题，请告诉我，我会在这里分享我的代码。

【讨论】：