前言
前一段時間做項目時，遇到一個問題就是AngularJS實現圖片預覽和上傳的功能，在Angular4中，通過input:file上傳選擇圖片本地預覽的時候，通過window.URL.createObjectURL獲取的url賦值給image的src出現錯誤：
WARNING: sanitizing unsafe URL value
下面介紹一下解決方法：
html代碼：
<input type="file" (change)="fileChange($event)" ><img [src]="imgUrl" alt="">
其中，change方法會在每次選擇圖片后調用，image的src必須通過屬性綁定的形式，使用插值表達式同樣會出錯
ts代碼
import { Component, OnInit } from '@angular/core';import { DomSanitizer } from '@angular/platform-browser' @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent implements OnInit { imgUrl; constructor( private sanitizer: DomSanitizer ){} ngOnInit() { } fileChange(event){ let file = event.target.files[0]; let imgUrl = window.URL.createObjectURL(file); let sanitizerUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl); this.imgUrl = sanitizerUrl; }}首先，引入DomSanitizer，然后在構造器里面注入，最重要的就是把window.URL.createObjectURL生成的imgUrl通過santizer的bypassSecurityTrustUrl方法，將它轉換成安全路徑。
最后將生成的安全的url賦值給imgUrl，此時就沒有問題了~
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
