0

I'm using Cloudinary images with the Ionic framework via the cloudinary-angular library and I'm having some issues with the images loading.

When I test via the ionic serve method, things seem to work fine. However, when I install the app to the device, the images break. Anyone have any ideas of how to fix this?

The following are examples of some of my code:

<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>

and:

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

And like I said, both of these work using ionic serve.

Update: Using Safari debug tool, I discovered the following. SafariDebug

Fixed One Issue: App Transport Security issue was fixed by adding the following to the app's Info.plist under Resources/MyApp-Info.plist. More details at App Transport Security. AppTransport

Fixed Second Issue: Ended up being an issue with the cloudinary_angular library. For some reason, it's returning the url with the file:// prototocol instead of the http:// one that the app needed. See the solution via my fork robksawyer/cloudinary_angular.

Rob Sawyer
  • 2,163
  • 1
  • 24
  • 25

1 Answers1

0

probably a whitelist error?

see complete info here https://github.com/apache/cordova-plugin-whitelist

Quick Info

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

Then modify your config.xml appropriately

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

See documentation provided above for complete explaination

Aaron Saunders
  • 33,180
  • 5
  • 60
  • 80
  • I initially thought that was the issue as well, but then I reviewed my config.xml and I had the content policy set. However, to double check, I ran `cordova plugin add cordova-plugin-whitelist` and it gave me the following: – Rob Sawyer Sep 21 '15 at 05:15
  • https://gist.github.com/robksawyer/6a83dad2bf9db156e845 Which makes me think it never installed it for ios. – Rob Sawyer Sep 21 '15 at 05:16
  • Ended up getting it installed via `ionic plugin add cordova-plugin-whitelist@1.1.0`, but still no luck. I was sure to run `ionic prepare ios` and `ionic build ios` as well before testing. Thanks though, it was worth a shot. – Rob Sawyer Sep 21 '15 at 05:35