這次帶給大家Angular圖片上傳預覽路徑問題的解決，解決Angular圖片上傳預覽路徑問題的注意事項有哪些，下面就是實戰案例，一起來看看。
前言
#
前一段時間做專案時，遇到一個問題就是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，此時就沒有問題了~
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
############################################################## #####以上是Angular圖片上傳預覽路徑問題的解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！
