溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
前一段時間做項目時，遇到一個問題就是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，此時就沒有問題了~
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
