I'm using an img tag in my template to show selected images immediately but selecting bigger (~5MB) images throws the error RangeError: Maximum call stack size exceeded.

template:

<img [src]="picture[profilePictureType]" *ngIf="picture[profilePictureType]" />
<input type="file" #profileInput accept="image/*" (change)="pictureSelected($event, profilePictureType)" />

ts:

picture: any[] = [];
profilePictureType = PictureType.Profile;

pictureSelected(event: any, pictureType: PictureType) {
  const pictureTypeStr = (PictureType[pictureType] + 'Picture').replace(/./, c => c.toLowerCase());
  if (event.target.files && event.target.files[0]) {
    const reader = new FileReader();
    reader.onload = (e: any) => {
      this.picture[pictureType] = e.target.result; // this is throwing the error
      this.userForm.controls.extendedData.get(pictureTypeStr).setValue(e.target.result);
      this.userForm.controls.extendedData.get(pictureTypeStr).markAsTouched();
      this.userForm.controls[pictureTypeStr + 'Changed'].setValue(true);
    };

    reader.readAsDataURL(event.target.files[0]);
  }
}

What am I missing here? I've tried using var profilePicture: any; instead of the array but that didn't help. There's no problem if I comment out the img tag however so I suppose this is caused by the angular change detection cycles but I don't know how. I've tried to use the async pipe before to load the images from the server and that ended up requesting the server many times a second. (I wanted only once.)

Stack trace of the error:

at String.match (<anonymous>)
at _sanitizeUrl (core.js:4872)
at ɵɵsanitizeUrl (core.js:5237)
at elementPropertyInternal (core.js:7913)
at Module.ɵɵproperty (core.js:14774)
at UserDataComponent_ng_template_3_img_36_Template (userdata.component.html:52)
at executeTemplate (core.js:7511)
at refreshView (core.js:7380)
at refreshEmbeddedViews (core.js:8481)
at refreshView (core.js:7404)