Ionic 3 - ios - 在屏幕上显示选定的图像

Question

我设置了相机插件，从照片库中选择一张图片上传到服务器，代码如下：

getImage() {
  //By default the camera retrieves the image as a JPEG file.
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    targetWidth:1080,
    targetHeight:1080,
    correctOrientation: true,
    mediaType: this.camera.MediaType.PICTURE,
    encodingType: this.camera.EncodingType.JPEG

  }

  this.camera.getPicture(options).then((fileUri) => {

    if (this.platform.is('ios')) {
        return this.crop.crop(fileUri, {quality: 100});
      } else if (this.platform.is('android')) {
        // Modify fileUri format, may not always be necessary
        fileUri = 'file://' + fileUri;

        /* Using cordova-plugin-crop starts here */
        return this.crop.crop(fileUri, { quality: 100 });
      }
  }, (err) => {
    console.log(err);

  }).then((path) => {
    // path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
    console.log('Cropped Image Path!: ' + path);
    this.imagePath = path;
    return path;
  });
}

然后我在屏幕上显示我的图像预览，如下所示：

<img [src]="imagePath"  />

选择图像、裁剪和上传在 iOS 和 Android 上都可以正常工作。但是，在 iOS 上，图像的显示不起作用。 （什么都没有出现）

我的控制台日志显示如下：

2017-12-07 15:06:52.559614-0500 fd-app[2537:1186586] [MC] systemgroup.com.apple.configurationprofiles 路径的系统组容器是 /private/var/containers/Shared/SystemGroup/ systemgroup.com.apple.configurationprofiles 2017-12-07 15:06:52.560425-0500 fd-app[2537:1186586] [MC] 从公共有效用户设置中读取。 2017-12-07 15:06:55.754175-0500 fd-app[2537:1186662] [发现] 发现扩展时遇到错误：错误域 = PlugInKit 代码 = 13 “查询已取消” UserInfo = {NSLocalizedDescription = 查询已取消} 2017-12-07 15:07:04.589982-0500 fd-app[2537:1186586] 裁剪图像路径！：file:///var/mobile/Containers/Data/Application/8B2CD0E8-F6AC-4530-BF02-D2F7A188EAC2/ tmp/cdv_photo_004.jpg

我尝试将 Photo Library Usage 属性添加到 Info.plist 文件中，但这没有帮助。有什么建议可以尝试下一步吗？

更新：不确定这是否与此有关，但我使用的是 Xcode 9.2 beta，因为我的 iPhone 是 11.2

此外，我在谷歌上搜索的所有内容都指出这是一个权限问题，但是，在选择图像后，图像出现在裁剪器中......这让我怀疑这里发生了什么奇怪的事情？裁剪器如何显示图像而不显示 HTML 页面？

Answer 1

您也可以尝试使用“DomSanitizer”（由于某种原因，图像被锁定）：

ts

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

constructor(
   public _DomSanitizer: DomSanitizer,
   private cameraCtrl: Camera,
   ...
}


this.cameraCtrl.getPicture(this.options).then((imageData) => {
   this.photoSrc  = 'data:image/jpg;base64,' + imageData;
   this.cameraPhoto = this._DomSanitizer.bypassSecurityTrustUrl(this.photoSrc)
...})

html

<img[src]="cameraPhoto">

Answer 2

如果您根据官方blog post 使用WKWebview 这是IOS 11 中的默认webview，您需要在HTML 中使用之前rewrite file:// url。

如果您使用的是本地文件（文本文件、图像、视频），则需要确保文件路径前面没有 file://。

import { normalizeURL } from 'ionic-angular';

在你的函数中，

 this.imagePath = normalizeURL(path);
    return path;

进一步检查 troubleshooting section 是否相同。