离子（电容器） - 捕获图像后如何查看图像？

Question

I am able to capture an image with ionic capacitor and convert it to a base 64 string so I can send it to the API. But how do I show the image on the HTML side after capturing it so the user can see it before it is uploaded?

Below is the code when I click on the submit button

  CreateMainStore(MainStoreForm: FormGroup) {
    const mainStore: MainStoreModel = MainStoreForm.value;
    let formData = new FormData();
    // formData.append("mainStoreId", mainStore.mainStoreId.toString());
    formData.append("mainStoreName", mainStore.mainStoreName);
    formData.append("imageTitle", mainStore.imageTitle);
    formData.append("mainStoreLogo", this.Logo);

    var object = {};
    formData.forEach((value, key) => {
      object[key] = value;
    });
    var json = JSON.stringify(object);

    this.dataService.AddMainStore(mainStore);
    this.router.navigate([""]);
  } // Create MainStore

This is the code I use to capture the image and store it in a Logo variable

  async selectImageSource() {
    const buttons = [
      {
        text: "Take Photo",
        icon: "camera",
        handler: () => {
          this.addImage(CameraSource.Camera);
        },
      },
      {
        text: "Gallery",
        icon: "image",
        handler: () => {
          this.addImage(CameraSource.Photos);
        },
      },
    ];

    const actionSheet = await this.actionSheetCtrl.create({
      header: "Select Image Source",
      buttons,
    });
    await actionSheet.present();
  } // End of select image source

  async addImage(source: CameraSource) {
    const image = await Camera.getPhoto({
      quality: 60,
      allowEditing: true,
      resultType: CameraResultType.Base64,
      height: 128,
      direction: CameraDirection.Rear,
      source,
    });
    this.Logo = image.base64String;
  }

Answer 1

In your HTML file just try

<img [src]="Logo"/>

it will show the image

Answer 2

First I needed to import:

import { DomSanitizer } from "@angular/platform-browser";

Next I prepended "data:image;base64," to the base64 string that I received from the Camera plugin.

Then I needed to sanitize this.logo by making use of the following method:

  transformer() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.Logo);
  }

lastly I made use of the above answer from "Edmad Abodou" to call the method using the img tag:

<img [src]="transformer()" />
``

And this allowed me to view the image after the user uploaded it.