Search code examples
angularjsimagecordovacross-platformios9

Unable to load images cordova - ios 9


Really a bizzare issue, it was all working till now, but when we tried to build the cross platform app into the iphone 5s having ios 9, the images won't just appear, neither do the image load from the api to the img src work, specially whenever I try to call the following code.

<img ng-if="eachItem.Image.length > 0" 
src="https://<name hidden>.s3.amazonaws.com/images/{{eachItem.Image}}"
fallback-src="images/no_foto.jpg" alt="" class="spac-bdr">

But the interesting part is everything works fine in ios 8. Alos the apis all working fine. Just the images won't load.

But there is no such issue for the android app built using the same code. It seems to affect the apps running only on devices having ios 9 OS.

Any Idea how to overcome the issue?


Solution

  • As i commented already under the answer from @Kailas, the way he posted is not the recommended way. Please, to everybody who read this: Think about the security of your application!

    Although i already told and linked my detailed answer to the iOS 9 Ajax / ATS Problem, i'm going to do a fullquote here because of completeness.

    So fullquote following - Original post over here

    As far as i understood the whole ATS (App Transport Security - iOS 9) thing, the recommended method from area28 should not be the one you're using inside an application.

    <key>NSAppTransportSecurity</key> 
    <dict> 
        <key>NSAllowsArbitraryLoads</key><true/>
    </dict>
    

    This will allow all external requests to every domain what is definitively not the way you should use it. In my opinion you should define a new <dict> inside your info.plist and add this code to it (to edit the info.plist you can just use a normal text editor like sublime text etc.):

    <key>NSAppTransportSecurity</key>
        <dict>
            <key>NSExceptionDomains</key>
            <dict>
                <key>domain.tld</key>
                <dict>
                    <key>NSIncludesSubdomains</key>
                    <true/>
                    <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                    <true/>
                    <key>NSTemporaryExceptionMinimumTLSVersion</key>
                    <string>TLSv1.1</string>
                </dict>
            </dict>
        </dict>
    

    This will only allow requests to the domain you specified. The described way is the one which apple introduced on the WWDC 2015. As you can see on the screenshot, it's the way apple want the users to use it.

    If you haven't specified anything, you'll get

    Failed to load webpage with error: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

    So, change it like i said and the error is gone away. enter image description here