使用 Capacitor 和 Ionic 显示图像时出错

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 phone 上进行测试时，图像在磁盘上保存良好，但页面上仍然没有显示。

Answer 1

如果您使用 resultType Uri，则必须使用 capturedImage.webPath 来显示 url，除非您使用 resultType DataUrl

，否则 dataUrl 未定义

使用 Capacitor 和 Ionic 显示图像时出错

Error displaying image using Capacitor and Ionic

ionic-framework

angular

ionic4

capacitor