Angular框架中使用DomSanitizer解决base64

1、问题引入

后台返回人脸识别的照片是base64字符串过来的，但是前端在使用<img [src]='imgUrl' alt=''>时，谷歌浏览器中显示base64;unsafe也就是说拿过来的值是不安全的，因此导致base64图片无法展示在前端。

2、原因

后续查阅相关资料，得知这是Angular框架内部导致的结果，Angular中默认将所有输入的值视为不受信任的，当我们通过{{}}插值表达式、property、attribute等方式，将一个值从模板中插入到DOM中，Angular会自动清除和转义不受信任的值。

3、解决方案

使用DomSanitizer，首先在页面的组件中引入：

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

然后在构造函数中再进行声明一下：

constructor( private sanitizer: DomSanitizer ) {...}

声明好了之后，便开始对base64的Url进行处理。DomSanitizer的设定主要是防止跨站点脚本安全漏洞，通过清除值以便在不同的DOM上下文中安全使用。

this.imgUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.imgUrl);

在去html中直接插入url即可：

 <img [src]="imgUrl " width="100" height="100" />