How to use external image inside phonegap/jquerymobile app

4
votes

I'm developing a phonegap/jquery-mobile test application (I'm new in this technologies) for android and I want show inside my app an image stored on internet site. During app startup in avd I receive this notification when put in my index.html this element:

<img src="http://www.comolakeboats.it/images/stories/boats/gommone_12_150x100.jpg" width="120px;" />

Application Error - the connection to the server was unsuccessfull (file:///android_asset/www/index.html)

On log.cat I can see this error:

E/DroidGap(337): DroidGap: TIMEOUT ERROR! - calling webViewClient

I already checked connection both from browser and inside my application with an external link and in both case I can reach internet site.

What I'm missing? Exists a solution (maybe the same) suitable for Iphone,too?

This is my code:

<body>

    <div data-role="page" id="home_it"> 
        <div data-role="header" data-theme="a" id="it">
            <h1>TEST</h1> 
            <div data-role="navbar" data-iconpos="right" data-theme="a">
                <ul>
                    <li><a href="tel://+3933333333">Tel:+3933333333</a></li> 
                    <li><a href="mailto:[email protected]?subject=Info">Email</a></li>   
                </ul>
            </div> 
            <div class="ui-body ui-body-c"><!--  ui-body-b">-->  
                <p>Some text</p>
                <button id="my_list_button">Mostra</button>
            </div>
        </div> 
        <div data-role="content"  class="ui-body">
            <ul data-role="listview" id="my_list">
                <li data-role="list-divider">My list</li>
                <li>
                    <a href="http://www.comolakeboats.it" rel="external">
                        <img src="http://www.comolakeboats.it/images/stories/boats/gommone_12_150x100.jpg" width="120px;" />
                        <h3>title foo foo</h3>
                        <p style="color:red">foo foo foo foo</p>
                    </a>
                </li>
            </ul>
        </div>
                    <div data-role="footer">
            <div data-role="navbar" data-iconpos="right" data-theme="a">
                <ul>
                    <li><a href="#home" data-icon="home">&#160;</a></li>    
                    <li><a id="exit-app" data-icon="back">&#160;</a></li>    
                </ul>
            </div>  
        </div>
    </div> 


</body>

Thank you in advance

6
jquery-mobilecordova
A few notes that might help you: - Benoît Pointet

6 Answers

4
votes

Did you actually update the phonegap's whitelist? that tells the app which URLs it's allowed to access. You can also add a * to it, as described here

Hope this helps

2
votes

If you put higher values in defaultactivity:

super.setIntegerProperty("loadUrlTimeoutValue", 60000);
super.loadUrl("file:///android_asset/www/index.html", 60000);

It won't time out but it will take ages for your app to run...

0
votes

Maybe the most simple you can do is download the image and add it to your project. In that case just make the src attribute of the <img> tag reference the image path inside your project.

0
votes

A few notes that might help you:

  • the index.html has to be a full html document ...
  • you have to set the permissions to use the internet, in AndroidManifest.xml
  • the test device has to have an internet connection (try opening the image url on the device browser first).
0
votes

I have set the whitelist in my cordova.xml to ".*" but it still displays the same error so I tried looking for other solutions and found this out:

http://community.phonegap.com/nitobi/topics/phonegap_build_viewebclient_timeout_error_on_android_device

His solution was to redirect the page from the index.html to a main page. I don't know why it worked for me but happy that it did. If you would see any problem doing this work around please do comment, I don't want to encounter other major problems in the future because of this.

0
votes

I have the same problem. Finally i find the reason is "Content-Security-Policy" setting in head of the html!. You can simply remove the line like this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">