云图像无法通过 Ionic 框架工作

Question

我正在通过 cloudinary-angular 库将 Cloudinary 图像与 Ionic 框架一起使用，但我在加载图像时遇到了一些问题。

当我通过ionic serve 方法进行测试时，似乎一切正常。但是，当我将应用程序安装到设备时，图像会中断。有人知道如何解决这个问题吗？

以下是我的部分代码示例：

<cl-image ng-if="item.Attachment.name" public-id="{{bucket.mybucket}}/{{item.Attachment.name}}" crop="thumb" width="100" height="100" radius="max" format="png"></cl-image>
<cl-image ng-if="!item.Attachment.name" public-id="{{bucket.mybucket}}/{{bucket.defaultCheese}}" crop="thumb" width="100" height="100" radius="max" format="png"></cl-image>

和：

$scope.backgroundImg = $.cloudinary.url($scope.bucket.mybucket + "/" + results.response[0].Attachment.name, { format: 'png', height: 800, width: 580, crop: 'fit' }).toString();

就像我说的，这两个都使用ionic serve。

更新：使用 Safari 调试工具，我发现了以下内容。

修复了一个问题：通过将以下内容添加到应用程序的 Info.plist 中 Resources/MyApp-Info.plist 下，修复了应用程序传输安全问题。更多详情请访问App Transport Security。

修复了第二个问题：最终成为cloudinary_angular 库的问题。出于某种原因，它返回带有file:// 协议的url，而不是应用程序需要的http://。通过我的 fork robksawyer/cloudinary_angular 查看解决方案。

Answer 1

可能是白名单错误？

在此处查看完整信息https://github.com/apache/cordova-plugin-whitelist

快速信息

// install plugin
cordova plugin add cordova-plugin-whitelist

然后适当地修改你的config.xml

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

完整说明请参见上面提供的文档