昨天在本地环境部署网站时遇见了一个问题，后端接口返回的Base64类型的图片文件，在浏览器页面上无法正常显示，经过一番排查发现，问题出现在了两个方面：

• 1、网站前端使用了Angular框架，Angular中默认将所有输入的值视为不受信任的，当我们通过{{}}插值表达式、property、attribute等方式，将一个值从模板中插入到DOM中，Angular会自动清除和转义不受信任的值。
  解决方法：
  使用DomSanitizer，首先在页面的组件中引入：

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

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

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

  声明完成之后，使用sanitizer的方法对Base64的URL进行处理，Domsanitizer的作用主要是为了防止跨站点脚本安全漏洞，通过清除值以便于在不同的DOM上下文中安全使用。

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

• 2、图片的Base64字符串是从数据库中获取的，在数据库中存储时就已经在字符串的前面加上了“data:image/jpg;base64,”前缀，但是后端接口在返回数据的时候，又默认添加了一个前缀，所以前端接收到的值有两个重复的前缀。
  解决方法：
  这一步的解决方法更简单，在后端接口代码中去掉默认的前缀添加就好了