Ionic 4 加载本地资源无法在 IOS 上运行

Question

我正在尝试从用户 phone 加载图像，裁剪它然后显示。我正在使用 webview 插件来做到这一点。它在 android 上按预期工作，但在 IOS.

上不工作

我已经从另一个问题尝试过这个问题，它解决了找不到文件的错误

itemSrc = itemSrc.replace(/^file:\/\//, '');

我也查看了 NormalizeURL，但它似乎不适用于 Ionic 4

这是一些代码

 this.imagePicker.getPictures(options)
     .then((results: string[]) => {
           results.forEach(res => {
              this.crop.crop(res, {quality: 50})
              .then(
                data =>{
//this is extracting the URL
this.user.photos.push(this.webview.convertFileSrc(data));
},

之后，UI 应该显示裁剪后的图像，它在 android 上显示，但在 IOS 上不显示。

我使用 safari 开发工具进行检查，这是错误：

[Error] Failed to load resource: unsupported URL (unsafe:ionic://localhost/_app_file_/Users/radmac/Library/Developer/CoreSimulator/Devices/8E6A6BFA-66FA-4DB3-B556-BCE9E2EFE33A/data/Containers/Data/Application/C39D8D99-0F67-4D33-9195-EE2B4D4E4707/tmp/cdv_photo_024.jpg, line 0)

Answer 1

所以，我找到了解决方案。在此之前，您可以阅读这篇博客 post 如果您想了解更多关于 ionic native 和图像的信息，这真的很有帮助。 https://ionicframework.com/blog/storing-photos-with-the-cordova-camera-and-file-plugins/

解决方案是用 dom 消毒剂包裹 webview 转换后的 src，就像这样，

 const resolvedImg = this.webview.convertFileSrc(data);
 this.user.photos.push(<string>this.sanitizer.bypassSecurityTrustUrl(resolvedImg));

确保导入 dom 消毒剂。

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

...

 constructor(private sanitizer: DomSanitizer){
 ...
 }

Ionic 4 加载本地资源无法在 IOS 上运行

Ionic 4 Loading Local resource not working on IOS

android

ios

angular

ionic4