Angular2表示base64で画像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">