load dynamic external image from url phonegap

Question

I am doing an ajax call and dynamically loading info, im getting the image name from the server the image is also on the server, when im testing on the pc it works fine the image displays but when i deploy to my phone the image is not there... any way i can solve this problem?

            <script type="text/javascript">

            $(document).ready(function(){

            var parameters="userId="+ sessionStorage.getItem('userid');
            var DResults="";     
            DResults = DataExchange(parameters,"WCR_TripRequest.php");
            var Rdata  = JSON.parse(DResults);

            var content = '';

            $.each(Rdata, function(i, post) {
            var uids = (post.UserId);   
            var LTripId = (post.Tid);  
            var Name= (post.Name);
            var Surname =(post.Surname);
            var ppurl =(post.ppurl);
            var DepStreetAddress = (post.$DepstreetAddress);        
            var DepSubTown =truncate(post.DepSubTown);
            var DestStreetAddress=(post.DestStreetAddress);
            var DestSubTown =truncate(post.DestSubTown);  
            var RequestRespYes="true";
            var RequestRespNo="false";

            content += '<li id="'+LTripId+'" class="collection-item avatar">'+
            '<img src="http://***.***.59.45/ProfileImages/'+ppurl+'" alt="" class="circle">'+
            '<span class="title" style="color:black"> <b><a href="W_Profile_ThirdParty.html">'+Name+' '+Surname+'</a></b>'+
            '<br><center>Has requested to join you on your trip '+
            '<br> <i class="fa fa-location-arrow"></i>'+DepSubTown+' - '+DestSubTown+'</span><br>'+
            '<a id="AcceptTrip" onclick="PromptReply(\''+LTripId+'\',\''+RequestRespYes+'\',\''+uids+'\'); return false;" class="waves-effect waves-light btn"> <i class="fa fa-thumbs-up" aria-hidden="true"></i></a>&nbsp;'+
            '<a id="RejectTrip" onclick="PromptReply(\''+LTripId+'\',\''+RequestRespNo+'\',\''+uids+'\'); return false;" class="waves-effect waves-light btn"> <i class="fa fa-thumbs-down" aria-hidden="true"></i></a></center>'+
            '<a href="#!" class="secondary-content"><i class="material-icons"></i></a>'+
            '</li>';   
            });

            $(content).appendTo("#Searchlist");
            //document.getElementById("my").style.display = "none";
            //document.getElementById("tabheader").style.display = "visible";  

            });
            </script>

Try to set in your config.xml this tag – Jorge Mejia Feb 11 '17 at 16:33 — Jorge Mejia, Feb 11 '17 at 16:33

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

The image will display once you apply access using whitelist Plugin which helps you to place iframes and display images which are online.

$ cordova plugin add cordova-plugin-whitelist

$ cordova prepare

once you have added this plugin add the following in you config.xml file

<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" /> <!-- Required for iOS9 -->

Note: origin="*" and href="*" will give access to all URL. Once you got your image or iframe displayed, restrict the URL to allow only your content provider domains by following the instructions

load dynamic external image from url phonegap

1 Answers1