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是管道：

@Pipe({name: 'safeHtml'}) 
export class SafeHtml { 
    constructor(private sanitizer:DomSanitizer){} 

    transform(html) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(html); 
    } 
} 

然而，图像上传我后得到ERR_INVALID_URL错误。我可以在开发人员控制台中看到base64字符串。出了什么问题？

Answer 1

从myReader.result结果已经包含了'data:image/jpg;base64,'字符串，所以你应该删除：

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