title: Cloudinary Images Not Working via Ionic Framework
body: <p>I'm using Cloudinary images with the Ionic framework via the <a href="https://github.com/cloudinary/cloudinary_angular" rel="nofollow noreferrer"><code>cloudinary-angular</code></a> library and I'm having some issues with the images loading.</p>
  
  <p>When I test via the <code>ionic serve</code> 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?</p>
  
  <p>The following are examples of some of my code:</p>
  
  <pre><code>&lt;cl-image ng-if="item.Attachment.name" public-id="{{bucket.mybucket}}/{{item.Attachment.name}}" crop="thumb" width="100" height="100" radius="max" format="png"&gt;&lt;/cl-image&gt;
  &lt;cl-image ng-if="!item.Attachment.name" public-id="{{bucket.mybucket}}/{{bucket.defaultCheese}}" crop="thumb" width="100" height="100" radius="max" format="png"&gt;&lt;/cl-image&gt;
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>$scope.backgroundImg = $.cloudinary.url($scope.bucket.mybucket + "/" + results.response[0].Attachment.name, { format: 'png', height: 800, width: 580, crop: 'fit' }).toString();
  </code></pre>
  
  <p>And like I said, both of these work using <code>ionic serve</code>.</p>
  
  <p><strong>Update:</strong> Using Safari debug tool, I discovered the following.
  <a href="https://i.stack.imgur.com/8Mjm8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Mjm8.png" alt="SafariDebug"></a></p>
  
  <p><strong>Fixed One Issue:</strong> App Transport Security issue was fixed by adding the following to the app's Info.plist under <code>Resources/MyApp-Info.plist</code>. More details at <a href="https://developer.apple.com/library/prerelease/ios/technotes/App-Transport-Security-Technote/index.html" rel="nofollow noreferrer">App Transport Security</a>.
  <a href="https://i.stack.imgur.com/wLVUS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wLVUS.png" alt="AppTransport"></a></p>
  
  <p><strong>Fixed Second Issue:</strong> Ended up being an issue with the <a href="https://github.com/cloudinary/cloudinary_angular" rel="nofollow noreferrer">cloudinary_angular</a> library. For some reason, it's returning the url with the <code>file://</code> prototocol instead of the <code>http://</code> one that the app needed. See the solution via my fork <a href="https://github.com/robksawyer/cloudinary_angular/commit/9e68a57c2965f9f301d0918c2e4674ce8cd68c25" rel="nofollow noreferrer">robksawyer/cloudinary_angular</a>.</p>