3. unable to display remote image dynamically downloaded on iOS10

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

unable to display remote image dynamically downloaded on iOS10

  • M

    Hi,

    I’d wrote an app who download pictures taken by security cameras. It were working fine until user began to upgrade to iOS 10. Now, picture are not displayed anymore.
    I’d wrote a question about that on Stackoverflow Someone suggest to ask here.

    I’d tried a lot of solutions : upgrade platform, disable ATS, review whitelist settings, disable blob saving/loading, tried cordova-plugin-wkwebview, insert img src manually, disable some plugins. Nothing worked! Is someone experienced something like this ?
    0_1474941245547_Capture du 2016-09-26 21-43-54.png

    0 1 Reply
  • 侍

    @matheos Are these being loaded dynamically? How are they saved, i.e. on device or remotely loaded? If remotely, what protocol are you using and can you post a bit of your code for that part?

    0
  • M

    @munsterlander those pictures URL come from server’s API. Protocol is HTTP. Code just add a <img> tag to array shown by ng-repeat.

    there is some code cleared from unwanted stuff

     <!--|    PAGE PHOTOS    |-->
    <ons-template id="photo.html"> 
        <ons-page ng-controller="PhotoController">

            <div id="top"></div>
            <div id="photos_container"  smg-lazy-repeat="PhotosDelegate">
                <div class="photo_frame" ng-repeat="photo in arPhotos track by $index">
                    <img id="img-{{photo.photo_id}}" class="photo_img" ng-src="{{photo.src}}" ng-click="togglePhotoViewer($index)" />
                </div>
            </div>
        </ons-page>
    </ons-template>

    PhotosService.getPhotoByIndex(index, SpyCameras.getCurrentCameraId(), function(photo, _index) {
            $scope.arPhotos.push(photo);
        },

        function (nophoto) {
            if(index > 0 )
                getOlderPhotos();
        });
    }

     this.getPhotoByIndex = function(photo_index, cam_id, onPhotoLoad, onNophoto) {
        if( ! cameras[cam_id] || cameras[cam_id]["photos"].length == 0) {
            if(onNophoto) onNophoto();
            return;
        }
        if(cameras[cam_id]["photos"].length <= photo_index) {  
            return;
        }

        var photo = cameras[cam_id]["photos"][photo_index];
        

        photo.src = photo.photo_url;
        if(photo['src']) {
            onPhotoLoad(photo,photo_index);
            return;
        }
        
    }
    0 1 Reply
  • 侍

    @matheos Ok that all looks fine. What I was curious was how you were making your http call, i.e. jQuery ajax, xmlHttp, etc.? As I understand it, some of those have recently been deprecated and iOS is blocking those calls. I would be curious to try another JS GET request to the API and see if it returns image data. Also, on your return, is it sending a URL for the image or a BLOB?

    0
  • M

    I’ve wrote usable code who do the same pattern :

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script>
      var module = ons.bootstrap('my-app', ['onsen']);
      module.controller('AppController', function($scope) { 
		  
		  $scope.arPhotos = [{"photo_url":"![PICT0222_925201681219PMOZT0C.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0222_925201681219PMOZT0C.JPG","date":"2016-09-25T23:58:16.000Z","cam_id":12165,"photo_id":15772374,"meta":{"revision":0,"created":1474985347440,"version":0},"$loki":1,"src":"blob:file:///b1a2665a-22ae-4f0d-bf3d-3c8e67aeaa15","photo_date":"25/09/2016","photo_time":"19:58:16","newDay":true,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0221_925201681219PM4LKnE.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0221_925201681219PM4LKnE.JPG","date":"2016-09-25T23:00:33.000Z","cam_id":12165,"photo_id":15772372,"meta":{"revision":0,"created":1474985347441,"version":0},"$loki":2,"src":"blob:file:///178a2004-f9a9-4291-9ddf-7870b671406a","photo_date":"25/09/2016","photo_time":"19:00:33","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0220_925201681218PMGr1XA.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0220_925201681218PMGr1XA.JPG","date":"2016-09-25T22:46:21.000Z","cam_id":12165,"photo_id":15772370,"meta":{"revision":0,"created":1474985347441,"version":0},"$loki":3,"src":"http://myspypoint.com/account/8944503526144479117/092016/PICT0220_925201681218PMGr1XA.JPG","photo_date":"25/09/2016","photo_time":"18:46:21","newDay":false,"w":520,"h":390,"blob":null})
            {"photo_url":"![PICT0219_925201681218PMbP2Db.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0219_925201681218PMbP2Db.JPG","date":"2016-09-25T22:31:51.000Z","cam_id":12165,"photo_id":15772369,"meta":{"revision":0,"created":1474985347441,"version":0},"$loki":4,"src":"blob:file:///6ce6a549-a06e-410b-92f3-095a412a4ee7","photo_date":"25/09/2016","photo_time":"18:31:51","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0218_925201681218PMEs2os.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0218_925201681218PMEs2os.JPG","date":"2016-09-25T19:42:05.000Z","cam_id":12165,"photo_id":15772367,"meta":{"revision":0,"created":1474985347442,"version":0},"$loki":5,"src":"blob:file:///0f633eb2-5a53-45d4-b917-54ccc4350780","photo_date":"25/09/2016","photo_time":"15:42:05","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0217_925201681217PMdmkUG.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0217_925201681217PMdmkUG.JPG","date":"2016-09-25T19:20:08.000Z","cam_id":12165,"photo_id":15772365,"meta":{"revision":0,"created":1474985347442,"version":0},"$loki":6,"src":"blob:file:///da439895-549e-4530-9ba6-40f002437a14","photo_date":"25/09/2016","photo_time":"15:20:08","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0216_925201681217PMP5oqQ.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0216_925201681217PMP5oqQ.JPG","date":"2016-09-25T16:34:07.000Z","cam_id":12165,"photo_id":15772363,"meta":{"revision":0,"created":1474985347442,"version":0},"$loki":7,"src":"blob:file:///4214c3b2-bdc5-4df0-a11e-d7d7806960ba","photo_date":"25/09/2016","photo_time":"12:34:07","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0215_925201681216PMPoljT.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0215_925201681216PMPoljT.JPG","date":"2016-09-25T16:20:21.000Z","cam_id":12165,"photo_id":15772361,"meta":{"revision":0,"created":1474985347443,"version":0},"$loki":8,"src":"blob:file:///4e427a88-1ef1-468f-8136-13275b49221e","photo_date":"25/09/2016","photo_time":"12:20:21","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0214_925201681216PMwGl3g.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0214_925201681216PMwGl3g.JPG","date":"2016-09-25T16:02:18.000Z","cam_id":12165,"photo_id":15772360,"meta":{"revision":0,"created":1474985347443,"version":0},"$loki":9,"src":"blob:file:///66fc7636-fa3b-47c6-a5d3-3f1276720607","photo_date":"25/09/2016","photo_time":"12:02:18","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0213_925201681216PMgA3Yd.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0213_925201681216PMgA3Yd.JPG","date":"2016-09-25T13:39:35.000Z","cam_id":12165,"photo_id":15772358,"meta":{"revision":0,"created":1474985347443,"version":0},"$loki":10,"src":"blob:file:///620af0a7-c37b-4a22-9610-77efc073087c","photo_date":"25/09/2016","photo_time":"09:39:35","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0212_925201681215PMSNaUw.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0212_925201681215PMSNaUw.JPG","date":"2016-09-25T13:34:09.000Z","cam_id":12165,"photo_id":15772356,"meta":{"revision":0,"created":1474985347444,"version":0},"$loki":11,"src":"blob:file:///fc62644c-b719-43a0-865e-0c1cb3e4f563","photo_date":"25/09/2016","photo_time":"09:34:09","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0211_925201681419AMdmgHn.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0211_925201681419AMdmgHn.JPG","date":"2016-09-25T12:09:04.000Z","cam_id":12165,"photo_id":15757817,"meta":{"revision":0,"created":1474985347446,"version":0},"$loki":12,"src":"blob:file:///4723117a-2e70-476d-8ec5-6f017faf90ab","photo_date":"25/09/2016","photo_time":"08:09:04","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0210_925201681419AMGQTSw.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0210_925201681419AMGQTSw.JPG","date":"2016-09-25T11:58:05.000Z","cam_id":12165,"photo_id":15757815,"meta":{"revision":0,"created":1474985347446,"version":0},"$loki":13,"src":"blob:file:///46dad07f-8df6-4a55-83b4-5ce34f1d757d","photo_date":"25/09/2016","photo_time":"07:58:05","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0209_925201681419AMQneni.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0209_925201681419AMQneni.JPG","date":"2016-09-25T11:40:36.000Z","cam_id":12165,"photo_id":15757813,"meta":{"revision":0,"created":1474985347446,"version":0},"$loki":14,"src":"blob:file:///f24d8daf-b432-433d-858c-ccbed64a8845","photo_date":"25/09/2016","photo_time":"07:40:36","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0208_925201681418AMq9gKO.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0208_925201681418AMq9gKO.JPG","date":"2016-09-25T08:25:19.000Z","cam_id":12165,"photo_id":15757811,"meta":{"revision":0,"created":1474985347448,"version":0},"$loki":15,"src":"blob:file:///13981971-0b3a-4a9e-a25f-be96a6685ceb","photo_date":"25/09/2016","photo_time":"04:25:19","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0207_925201681418AMXin7q.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0207_925201681418AMXin7q.JPG","date":"2016-09-25T03:03:49.000Z","cam_id":12165,"photo_id":15757809,"meta":{"revision":0,"created":1474985347449,"version":0},"$loki":16,"src":"blob:file:///61084acc-53e5-4101-9661-71fdf3713f2e","photo_date":"24/09/2016","photo_time":"23:03:49","newDay":true,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0206_925201681417AMljJ5a.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0206_925201681417AMljJ5a.JPG","date":"2016-09-25T02:01:33.000Z","cam_id":12165,"photo_id":15757807,"meta":{"revision":0,"created":1474985347449,"version":0},"$loki":17,"src":"blob:file:///91aac3c1-505f-4c6e-bb12-73677f4e34e0","photo_date":"24/09/2016","photo_time":"22:01:33","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0205_925201681417AMuOd4P.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0205_925201681417AMuOd4P.JPG","date":"2016-09-24T23:30:09.000Z","cam_id":12165,"photo_id":15757804,"meta":{"revision":0,"created":1474985347449,"version":0},"$loki":18,"src":"blob:file:///ae973216-ce93-430e-aa09-678124fc0d44","photo_date":"24/09/2016","photo_time":"19:30:09","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0204_925201681417AMIP1wJ.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0204_925201681417AMIP1wJ.JPG","date":"2016-09-24T23:20:00.000Z","cam_id":12165,"photo_id":15757802,"meta":{"revision":0,"created":1474985347450,"version":0},"$loki":19,"src":"blob:file:///3546cb8c-85aa-40cd-8a6e-6213741bdfe3","photo_date":"24/09/2016","photo_time":"19:20:00","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0203_925201681416AMcbql3.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0203_925201681416AMcbql3.JPG","date":"2016-09-24T23:03:17.000Z","cam_id":12165,"photo_id":15757800,"meta":{"revision":0,"created":1474985347451,"version":0},"$loki":20,"src":"blob:file:///378aea5c-cd49-4f11-a4b9-2e0042b61639","photo_date":"24/09/2016","photo_time":"19:03:17","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0202_925201681416AMbK6wM.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0202_925201681416AMbK6wM.JPG","date":"2016-09-24T22:48:20.000Z","cam_id":12165,"photo_id":15757798,"meta":{"revision":0,"created":1474985347451,"version":0},"$loki":21,"src":"blob:file:///14f9ab39-c836-47d1-8e2b-a619c9fb5dde","photo_date":"24/09/2016","photo_time":"18:48:20","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0201_925201681415AM0ChYp.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0201_925201681415AM0ChYp.JPG","date":"2016-09-24T22:14:33.000Z","cam_id":12165,"photo_id":15757796,"meta":{"revision":0,"created":1474985347452,"version":0},"$loki":22,"src":"blob:file:///4976e6d3-ecb8-4e9b-bfb4-9bcc47332ea3","photo_date":"24/09/2016","photo_time":"18:14:33","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0200_925201681415AMk5uYi.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0200_925201681415AMk5uYi.JPG","date":"2016-09-24T21:54:47.000Z","cam_id":12165,"photo_id":15757794,"meta":{"revision":0,"created":1474985347453,"version":0},"$loki":23,"src":"blob:file:///dbd44d02-5c8f-41fe-8c16-3bee1446092b","photo_date":"24/09/2016","photo_time":"17:54:47","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0199_925201681414AMUV7TX.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0199_925201681414AMUV7TX.JPG","date":"2016-09-24T21:48:55.000Z","cam_id":12165,"photo_id":15757792,"meta":{"revision":0,"created":1474985347453,"version":0},"$loki":24,"src":"blob:file:///e12e4193-9535-4e23-847c-09e5fba783be","photo_date":"24/09/2016","photo_time":"17:48:55","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0198_925201681414AMfe1a8.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0198_925201681414AMfe1a8.JPG","date":"2016-09-24T21:29:08.000Z","cam_id":12165,"photo_id":15757790,"meta":{"revision":0,"created":1474985347453,"version":0},"$loki":25,"src":"blob:file:///055a3abc-bf0e-4ad9-9744-dd861414ceb8","photo_date":"24/09/2016","photo_time":"17:29:08","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0197_925201681414AMGZuW4.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0197_925201681414AMGZuW4.JPG","date":"2016-09-24T18:00:51.000Z","cam_id":12165,"photo_id":15757788,"meta":{"revision":0,"created":1474985347454,"version":0},"$loki":26,"src":"blob:file:///38b3bda4-7326-43ba-a0ba-7a2c22794e20","photo_date":"24/09/2016","photo_time":"14:00:51","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0196_925201681413AMko7Vs.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0196_925201681413AMko7Vs.JPG","date":"2016-09-24T17:42:17.000Z","cam_id":12165,"photo_id":15757786,"meta":{"revision":0,"created":1474985347454,"version":0},"$loki":27,"src":"blob:file:///69ece980-b7f5-4f30-8729-020a891f3961","photo_date":"24/09/2016","photo_time":"13:42:17","newDay":false,"w":520,"h":390,"blob":{}})
            {"photo_url":"![PICT0195_925201681413AMyvj11.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0195_925201681413AMyvj11.JPG","date":"2016-09-24T17:18:42.000Z","cam_id":12165,"photo_id":15757784,"meta":{"revision":0,"created":1474985347454,"version":0},"$loki":28,"src":"blob:file:///2995128d-db68-44dd-bbf1-4a893ba3e0f3","photo_date":"24/09/2016","photo_time":"13:18:42","newDay":false,"w":520,"h":390,"blob":{}}];)
	    ons.ready(function() {
          // Init code here
        });	  
	  });
      module.controller('PageController', function($scope) {
    
      });
    </script>
    <style>
    .photo_img {
		width:28%;
		padding:10px;
		float:left;
	}
    </style>
  </head>
  <body ng-controller="AppController">
    <ons-tabbar>
  <ons-tab page="home.html" active="true">
		<ons-icon icon="ion-home"></ons-icon>
		<span style="font-size: 14px">Home</span>
	  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
		<div class="photo_frame" ng-repeat="photo in arPhotos track by $index">  
			<img id="img-{{photo.photo_id}}" class="photo_img" ng-src="{{photo.photo_url}}" photoloader="loader-{{photo.photo_id}}" style="width:30%"/>
        </div>

</ons-template>
    
  </body>
</html>
    0 1 Reply
  • 侍

    @matheos Ok, sorry for the delay. I really do not see what is going on. To test, I placed the first url in just an img tag and I had no problem displaying the image of a deer on several devices. Unfortunately, I do not have an iOS device to play with at the moment as it is on loan. I hope to have it tomorrow and will post results.

    I did see that iOS 10 disabled remote loading of images for mail items and I am wondering if that has something to do with your issue as I can find no fault in the code itself (granted, angular is not my forte).

    0
  • M

    @munsterlander Ok thank you. Without iOS device, if you have a mac you can use emulator. May be I should try without angular but it will be a bad news since the whole app is built with it.

    0 1 Reply
  • 侍

    @matheos Since you have an iOS device handy, can you try just this code:

    <!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0/js/onsenui.js"></script>
    <script src="components/loader.js"></script>
</head>
<body>
 <ons-page>
  <ons-toolbar>
    <div class="center">iOS Test</div>
  </ons-toolbar>
    <img src="![PICT0222_925201681219PMOZT0C.JPG](http://myspypoint.com/account/8944503526144479117/092016/PICT0222_925201681219PMOZT0C.JPG") />
</ons-page>

</body>
</html>
    0
  • M

    Thank you @munsterlander .
    I’ve also publish my bug to apache bug tracker. Someone there had the wonderful idea to test it with random img on internet. It’s work!! the issue is with the mySPYPOINT server. May be something with TLS version… It’s a windows 2008 server (R2 ? not sure). I will publish my solution when i will have a defenitive one.

    0 1 Reply
  • 侍

    @matheos Oh cool! Glad you got that figured out.

    1
  • M

    the issue come from the Exif of picture. they are adjust by the camera software to lower data transfert cost. We also had an issue with TLS for login with the app. It is also fixed.

    Thank you for your help @munsterlander .

    0
ios10 1