显示图像时出现不安全的 URL 错误答案

【问题标题】：Getting unsafe URL error while displaying image显示图像时出现不安全的 URL 错误
【发布时间】：2020-01-04 17:23:54
【问题描述】：

在 Angular 6 中显示图像时在控制台中出现不安全的 URL 错误

我正在拍照

<br>Primary Image <input type="file" (change)="readUrl($event)">

在另一个组件中，我希望显示我的图像

<tr *ngFor="let x of response">
    <td>
        <img [src]="x.productPrimaryImage">
    </td>
</tr>

获取图片路径的方法

readUrl(event) {
    this.productPrimaryImage = event.target.value;
}

警告：清理不安全的 URL 值 C:\Users\mayursinghal\Pictures\Screenshot (9).png（参见 http://g.co/ng/security#xss）

【问题讨论】：

标签： angular

【解决方案1】：

这是 Angular 发出的警告，因为您的应用程序可能会受到 XSS 攻击。如果您想绕过此安全警告，您需要先清理 URL 以使其安全地显示在 UI 中。您可以使用DomSanitizer（来源：docs）来执行此操作。

创建一个函数来清理组件中的图像 url

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

...

constructor(private sanitizer: DomSanitizer) { }

sanitizeImageUrl(imageUrl: string): SafeUrl {
    return this.sanitizer.bypassSecurityTrustUrl(imageUrl);
}

然后在您的模板中，调用此函数来清理您的 URL。

<tr *ngFor="let x of response">
    <td>
        <img [src]="sanitizeImageUrl(x.productPrimaryImage)" />
    </td>
</tr>

警告：使用不受信任的图像 URL 调用 bypassSecurityTrustUrl 会使您的应用程序面临 XSS 安全风险！

【讨论】：

在 sanitizeImageUrl 中获取空值
对不起，我忘了显示你需要在构造函数中添加DomSanitizer 的部分。查看更新后的答案。
收到错误“不允许加载本地资源：file:///D:/1.jpg”
这是你的 Chrome 浏览器给你一个错误。理想情况下，您应该使用云存储或在某些服务器中托管图像，并使您的 API 返回一个相对路径，该路径与服务器路径一起应该为您提供实际图像。如果您使用这种特定方法获取本地资源的绝对图像路径，则此答案中的插件可能会帮助您。 (stackoverflow.com/a/46480984/9739129)。
注意：您不能使用此映像路径在任何地方部署，此方法应仅用于测试或练习。否则我建议你使用另一种方法（我在之前的评论中提到了其中一些）。

【解决方案2】：

首先，您提供的绝对路径将在部署后停止工作。将您的图像移动到项目中并使用相对 URL，例如 /images/Screenshot (9).png

其次，你用[src]代替

<img [src] = "x.productPrimaryImage">

【讨论】：

我在数据库中添加我的图像路径，然后通过 get api 在其他页面上显示图像
在项目中移动图像不是（如果有的话）问题的可行解决方案。
它不能是本地文件系统的绝对路径，它必须是网络可访问的。