Estoy usando image-cropper en un proyecto angular.
Documentación: https://www.npmjs.com/package/ngx-image-cropper
Hay varias imágenes en la página, que se cargan mediante el bucle *ngIf="field.type === 'images'" y se muestran en la etiqueta image-cropper en [imageURL] . Las imágenes se muestran correctamente en Origin, pero el campo Vista previa muestra aleatoriamente diferentes fotos. Cuando el evento (imageCropped)="imageCropped($event)" en todos los cambios de vista previa en la foto cambiada.
¿Cómo hago que Origin y Preview tengan la misma foto, y cuando imageCropped ($ event) en Preview, solo cambia esa foto?
import { Component } from '@angular/core'; import { ImageCroppedEvent } from 'ngx-image-cropper'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-image-uploader'; imageChangedEvent: any = ''; croppedImage: any = ''; fileChangeEvent(event: any): void { this.imageChangedEvent = event; } imageCropped(event: ImageCroppedEvent) { this.croppedImage = event.base64; } imageLoaded() { // show cropper } cropperReady() { // cropper ready } loadImageFailed() { // show message } } <div class="edit-window__wrapper" *ngIf="field.type === 'images'"> <div class="edit-window__origin"> <p>Origin</p> <image-cropper [imageURL]="imageComplexForm.controls[field.fields.file.key].value.path" [maintainAspectRatio]="false" [aspectRatio]="4 / 4" [resizeToWidth]="256" format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()" ></image-cropper> </div> <div class="edit-window__preview> <p>Preview</p> <img [src]="croppedImage" /> </div> </div>