Not displaying IONIC angular

[eslangcap]

Hello I can't seem to display the cropping feature I input the source base64. I even try uploading the file. It also not showing in mobile build.

page.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

@Component({
  selector: 'app-capture-id',
  templateUrl: './capture-id.page.html',
  styleUrls: ['./capture-id.page.scss'],
})
export class CaptureIdPage implements OnInit {
  imageBase64: any = '';
  croppedImage: any = '';

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {}

  async getImage() {
    const image = await Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.Base64,
      source: CameraSource.Photos,
    });

    this.imageBase64 = `data:image/jpg;base64,${image.base64String}`;
    this.croppedImage = null;
  }

  fileChangeEvent(event: any): void {
    console.log(event.target.value);
  }

  imageCropped(event: any) {
    console.log(event);
    if (event.objectUrl) {
      this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(
        event.objectUrl
      );
    }
    // event.blob can be used to upload the cropped image
  }

  imageLoaded(image: any) {
    // show cropper
  }
  cropperReady() {
    // cropper ready
  }
  loadImageFailed() {
    console.log('error image');
    // show message
  }

  startCropImage() {
    console.log('startCropImage');
  }
}

page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button (click)="getImage()">Click Me</ion-button>

  <div class="image-crop-wrapper">
    <image-cropper
      [imageBase64]="imageBase64"
      [maintainAspectRatio]="true"
      [aspectRatio]="4 / 3"
      format="png"
      [resizeToWidth]="1280"
      (imageCropped)="imageCropped($event)"
      (imageLoaded)="imageLoaded($event)"
      (cropperReady)="cropperReady()"
      (loadImageFailed)="loadImageFailed()"
      (startCropImage)="startCropImage()"
    ></image-cropper>
  </div>

  <img [src]="croppedImage" />
</ion-content>

Ionic:

   Ionic CLI                     : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 7.6.3
   @angular-devkit/build-angular : 16.2.11
   @angular-devkit/schematics    : 16.2.11
   @angular/cli                  : 16.2.11
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.5.0
   @capacitor/android : 5.5.0
   @capacitor/core    : 5.5.0
   @capacitor/ios     : 5.5.0

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 2.0.0) : 1.7.4

System:

   NodeJS : v20.7.0 (/opt/homebrew/Cellar/node/20.7.0/bin/node)
   npm    : 10.2.5
   OS     : macOS Unknown

[pepegmz]

you are validating a blob object instead of a base64 string in imageCropped method, try with:

if (event.base64) {}