Javascript-显示本地存储的大型图像

我正在学习一个关于离子/电容器的教程，这个部分给我带来了一些问题：

Plugins.Camera.getPhoto({
  quality: 50,
  source: CameraSource.Prompt,
  correctOrientation: true,
  width: 200,
  resultType: CameraResultType.Base64
})
  .then(image => {
    this.selectedImage = image.base64String;

使用模板直接访问SelecteImage，如下所示：

  <ion-img
          role="button"
          class="image"
          (click)="onImagePicked()"
          [src]="selectedImage"
          *ngIf="selectedImage"
  ></ion-img>

我仍然会用这种方式将图像转换成一个巨大的URL，不是吗？那么，在本地存储大图像的正确方法是什么

---

我假设这是一个一般的JS问题，而不是特定于离子的问题，因此JS标签设置正确的前缀解决了这个问题；当您检索base64时，它应该有这样一个前缀，否则一些框架可能会在它前面加上一个基本url：

    this.selectedImage = 'data:image/jpeg;base64,' + image.base64String;

---

设置正确的前缀解决了问题；当您检索base64时，它应该有这样一个前缀，否则一些框架可能会在它前面加上一个基本url：

    this.selectedImage = 'data:image/jpeg;base64,' + image.base64String;

---

您正在学习的教程已过期，请检查和此官方文档

Base64只返回Base64数据，正如您所了解的，这些数据不能显示在img标记中

---

但是有一个DataUrl结果类型，它返回一个正确的数据url，您可以使用它显示在img标签中。

您正在学习的教程已经过时，请检查和此官方文档

Base64只返回Base64数据，正如您所了解的，这些数据不能显示在img标记中

但是有一个DataUrl结果类型，它返回一个正确的数据url，您可以使用它来显示在img标记中。

在上签出源代码

如果指定resultType:CameraResultType.Uri

插件将

（*aprox：获取PhotoBlob并创建一个url，该url将从内存提供服务） 因此，您只需将其分配给img的src

如果您使用该插件将读取相机流并生成一个Base64数据url，如（data:content.typeOfImage/Base64），您也可以将其放在src字段中，那么img将解码字符串并呈现它

如果使用CameraResultType.Base64，插件将读取相机流并仅生成Base64字符串，而不是数据url。如果您知道图像的内容类型，则可以通过连接生成数据url，并拥有（data:content.typeOfImage/base64）。

在上签出源代码

如果指定resultType:CameraResultType.Uri

插件将

（*aprox：获取PhotoBlob并创建一个url，该url将从内存提供服务） 因此，您只需将其分配给img的src

如果您使用该插件将读取相机流并生成一个Base64数据url，如（data:content.typeOfImage/Base64），您也可以将其放在src字段中，那么img将解码字符串并呈现它

如果使用CameraResultType.Base64，插件将读取相机流并仅生成Base64字符串，而不是数据url。如果您知道图像的内容类型，则可以通过连接生成数据url并具有（data:content.typeOfImage/base64）