Ionic3中嵌入圖片，音頻url地址，出現“WARNING: sanitizing unsafe URL value”錯誤的解決方法

在項目中有時候需要在叫頁面上顯示圖片，音頻的信息，在項目中我把圖片和音頻等文件都轉成了base64格式上傳到服務器數據庫。

在Ionic2項目中比如使用：img，iframe，audio標籤的src，a標籤的href，需要使用數據庫傳來的base64數據時，變量直接賦值到url綁定數據的話，會報錯，同樣，需要引入外部url的資源鏈接也會報錯。

網上找了很多資料：才發現是Ionic2和TypeScript中對外部url資源鏈接做了安全限制
官網文檔中對此做了解釋：
http://http://g.co/ng/security#xss

所以可以在項目中做以下修改：

1. ts文件中：

//1.在需要使用外部url鏈接的ts文件中，引入DomSanitizer類
import { DomSanitizer } from '@angular/platform-browser';  

export class safeHtml{  

  safeUrl : any;  

  constructor(private sanitizer: DomSanitizer) {}  

  //2.在需要使用轉換後的url地方加上
  getSafeUrl(url){
      this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 
  }

2. html頁面中(這裏以audio標籤爲例)

<audio controls="controls" [src]="safeUrl"></audio>

然後就可以成功訪問到所需的資源了

下一篇介紹 Angular TypeScript 中的 DomSanitizer