Angular 이미지 업로드 미리보기 경로 문제 해결

이번에는 Angularpictureupload의 미리보기 경로 문제에 대한 해결책을 가져왔습니다. Angular 사진 업로드 미리보기 경로 문제를 해결하기 위한 주의사항은 무엇입니까? 실제 사례를 살펴보겠습니다. .

머리말

얼마 전 프로젝트를 진행하면서 AngularJS에서 이미지 미리보기 및 업로드 기능을 구현하는 문제에 직면했습니다. Angular4에서 input:file을 통해 로컬 미리보기용 이미지를 업로드하고 선택할 때, window.URL.createObjectURL을 사용하여 이미지의 src에 얻은 URL을 할당하는 중 오류가 발생했습니다.: 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 경고: 안전하지 않은 URL 값 삭제

해결책은 다음과 같습니다.

html 코드: rrreee
그 중 각 이미지가 선택된 후 변경 메소드가 호출됩니다. 이미지의 src는 Expression

도 잘못됩니다

ts 코드

rrreee 먼저 DomSanitizer를 도입한 다음 생성자에 주입합니다. 가장 중요한 것은 santizer의 우회SecurityTrustUrl 메서드를 통해 window.URL.createObjectURL에서 생성된 imgUrl을 🎜safe🎜경로로 변환하는 것입니다. 🎜🎜 마지막으로 생성된 보안 URL을 imgUrl에 할당하면 문제가 없습니다~🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어의 다른 관련 기사를 주목하세요. 웹사이트! 🎜🎜추천 자료: 🎜🎜🎜AngularJS는 가격 계산 기능을 구현합니다🎜🎜🎜🎜🎜Webpack이 Electron 애플리케이션을 구축하는 방법🎜🎜🎜🎜

위 내용은 Angular 이미지 업로드 미리보기 경로 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!