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

Angular2显示base64图像ERR_INVALID_URL

1 个答案: