Angular4 사용 시 안전하지 않은 이미지 경로 문제

이 글에서는 주로 Angular4의 안전하지 않은 이미지 업로드 미리보기 경로 문제에 대한 해결책을 소개합니다. 이 글은 샘플 코드를 통해 이를 매우 자세하게 소개하며, 필요한 모든 사람의 학습이나 학습에 도움이 될 수 있습니다. 아래에서 읽어보세요. 와서 함께 배워보세요.

머리말

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

WARNING: 안전하지 않은 URL 값을 삭제

다음은 해결 방법을 소개합니다. 방법:

html 코드: rrreee

그 중 각 이미지를 선택한 후 변경 방법이 호출됩니다. 이미지의 src는 다음과 같은 형식이어야 합니다. 속성 바인딩을 사용하면 오류가 발생합니다

ts 코드

rrreee먼저 DomSanitizer를 도입한 다음 생성자에 삽입합니다. 가장 중요한 것은 window.URL에서 생성된 imgUrl을 변환하는 것입니다. createObjectURL을 Santizer의 BypassSecurityTrustUrl 메소드를 통해 안전한 경로로 복사합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue+springboot가 도메인 간 싱글 사인온 문제를 구현하는 방법(자세한 튜토리얼)

🎜자바스크립트에서 일반적으로 사용되는 도구 클래스의 캡슐화를 자세히 소개합니다(자세한 튜토리얼) 🎜🎜🎜🎜소개합니다 Vue의 소스 코드 자세히 입력 파일(상세 튜토리얼) 🎜🎜🎜🎜여러 가지 JavaScript 코딩 표준을 자세히 소개합니다(상세 튜토리얼) 🎜🎜🎜🎜jQuery와 vue를 사용하여 드래그 인증 코드 기능을 구현하는 방법🎜🎜🎜🎜방법 JS에서 이메일 프롬프트 완성 기능 구현 🎜🎜

위 내용은 Angular4 사용 시 안전하지 않은 이미지 경로 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!