警告：清理不安全的 URL 值数据：text/html;base64，答案

【问题标题】：WARNING: sanitizing unsafe URL value data:text/html;base64,警告：清理不安全的 URL 值数据：text/html;base64，
【发布时间】：2021-05-10 11:15:42
【问题描述】：

我从服务器收到图像形式的响应，我将其作为 blob 接受并将其转换为图像

模板：

<img  [src]="imgSrc"  alt="Loading....">

ts 文件：

createImageFromBlob(image: Blob) {
     let reader = new FileReader();
     reader.addEventListener("load", () => {
    

      this.imgSrc=reader.result;
     }, false);
  
     if (image) {
        reader.readAsDataURL(image);
     }
  }

this.createImageFromBlob(data) //data is the response from the server

它给了我警告：清理不安全的 URL 值数据：text/html;base64。

使用 DomSanitizer bypassSecurityTrust 给出参数 String | 的错误ArrayBuffer 不能分配给类型字符串

createImageFromBlob(image: Blob) {
     let reader = new FileReader();
     reader.addEventListener("load", () => {
    

      this.imgSrc=this.sanitizer.bypassSecurityTrustResourceUrl(reader.result); //error here
     }, false);
  
     if (image) {
        reader.readAsDataURL(image);
     }
  }

如果 blob 到图像，我如何绕过角度安全

解决方案：问题出在 reader.result 中，它没有给出有效的图像，所以我不得不在后端将图像作为数组缓冲区获取，然后将其发送到前端以获得正确的图像.

实际上我的后端是先从另一个站点获取图像，然后将其发送到前端。

【问题讨论】：

标签： angular angular-dom-sanitizer

【解决方案1】：

如果你的图片是base64格式，你可以直接绑定到图片的src。

<img [src]="your-base64-image-filed"/>

在您的代码中，可能遗漏了一个类似 mime 类型的东西。您确定 reader.result 是有效图片吗？

【讨论】：

是的，问题出在 reader.result，它不是有效的图像。

【解决方案2】：

尝试使用消毒剂转换为 HTML，如下所示。

<img [src]="!='' ? _sanitizer.bypassSecurityTrustResourceUrl(croppedImage) : '/assets/images/default-profile.jpg'" alt="Image Preview"/>

【讨论】：