cordova - 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] System group container for systemgroup.com.apple.configurationprofiles path is /private/var/containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles 2017-12-07 15:06:52.560425-0500 fd-app[2537:1186586] [MC] Reading from public effective user settings. 2017-12-07 15:06:55.754175-0500 fd-app[2537:1186662] [discovery] errors encountered while discovering extensions: Error Domain=PlugInKit Code=13 "query cancelled" UserInfo={NSLocalizedDescription=query cancelled} 2017-12-07 15:07:04.589982-0500 fd-app[2537:1186586] Cropped Image Path!: 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

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

If you’re working with local files (text files, images, videos), you’ll need to make sure that the path of file does not have file:// in front of it.

import { normalizeURL } from 'ionic-angular';

在你的函数中，

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

进一步检查 troubleshooting section也一样。