Angular2 디스플레이베이스 64 화상 ERR_INVALID_URL 내 템플릿의

Question

:

<h5>Image upload</h5> 
<input type="file" accept="image/*" (change)="changeListener($event)"> 
<div *ngIf="image"> 
    <img [src]="'data:image/jpg;base64,' +image | safeHtml"> 
</div> 

그리고 내 컨트롤러 :

image: string=''; 

changeListener($event) : void { 
    this.readThis($event.target); 
} 

readThis(inputValue: any): void { 

    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader(); 

    myReader.onloadend = (e) => { 
     this.image = myReader.result; 
     console.log(this.image) 
    } 
    myReader.readAsDataURL(file); 
} 

SafeHTML에서 파이프이며 ERR_INVALID_URL 오류가 발생합니다. 내 개발자 콘솔에서 base64 문자열을 볼 수 있습니다. 무슨 일 이니?

Answer 1

myReader.result에서 결과는 이미 'data:image/jpg;base64,' 문자열을 포함하는, 그래서 당신은 그것을 제거해야합니다 :

<img [src]="image | safeHtml">