Angular2 display base64 image ERR_INVALID_URL

Question

In my template:

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

And in my 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 is a pipe:

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

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

However, after image is uploaded I get ERR_INVALID_URL error. I can see the base64 string in my developer console though. What is going wrong?

Poul Kruijt · Accepted Answer · 2017-04-04 07:53:39Z

5

The result from myReader.result already contains the 'data:image/jpg;base64,' string, so you should remove that:

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

answered Apr 4, 2017 at 7:53

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 display base64 image ERR_INVALID_URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related