使用電容器和離子顯示圖像時出錯

Question

我正在嘗試使用 Ionic 4 編寫一個簡單的相機應用程序，這是我用於捕獲圖像並將其顯示在 Ionic 選項卡中的代碼片段。

export class UploadPage {
  yourImage: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {  }

  async captureImage() {
    const capturedImage = await Plugins.Camera.getPhoto(
    {
      quality: 90,
      allowEditing: true,
      source: CameraSource.Camera,
      resultType: CameraResultType.Uri
    });

    this.yourImage = this.sanitizer.bypassSecurityTrustResourceUrl(capturedImage && (capturedImage.dataUrl));

    }
  }

當我嘗試運行代碼時，它看起來可以捕獲圖像，但它沒有顯示在瀏覽器中。 我看到這個

在 web 控制台中，我看到了這個

該圖像也不會出現在 devapp 中。

奇怪的是，當我在 Android 手機上進行測試時，圖像在磁盤上保存得很好，但它仍然沒有顯示在頁面上。

Answer 1

如果使用 resultType Uri，則必須使用 captureImage.webPath 來顯示 url，除非您設置 resultType DataUrl，否則 dataUrl 是未定義的