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: ts: 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

RangeError: Maximum call stack size exceeded when trying to display big image inline

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)

Answer

judging by that stack trace, angular is trying to sanitize the url you provided but it is messing up with the internal methods used by angular, trying using bypassSecurityTrustUrl() like this:

this.picture[pictureType] = this.sanitizer.bypassSecurityTrustUrl(e.target.result);

Advertisement

Answer