Estoy usando una etiqueta img en mi plantilla para mostrar las imágenes seleccionadas de inmediato, pero seleccionar imágenes más grandes (~5 MB) genera el error RangeError: Maximum call stack size exceeded .

modelo:

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

t:

 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]); } }

¿Que me estoy perdiendo aqui? He intentado usar var profilePicture: any; en lugar de la matriz, pero eso no ayudó. Sin embargo, no hay problema si comento la etiqueta img, así que supongo que esto se debe a los ciclos de detección de cambios angulares, pero no sé cómo. Intenté usar la canalización asíncrona antes para cargar las imágenes del servidor y terminé solicitando el servidor muchas veces por segundo. (Solo quise una vez.)

Seguimiento de la pila del 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)