這篇文章主要給大家介紹了關於Angular4實現圖片上傳預覽路徑不安全問題的解決方法，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧。
前言
前一段時間做專案時，遇到一個問題就是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="">
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;
}
}window.URL.createObjectURL產生的imgUrl透過santizer的bypassSecurityTrustUrl方法，將它轉換成安全路徑。
vue springboot如何實作單一登入跨域問題（詳細教學）
詳細介紹javascript中常用工具類別的封裝（詳細教學）
##在JS中如何實作郵件匣提示補全功能以上是使用Angular4有關圖片路徑不安全的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
