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>

在我的 Controller 中:

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">