All geek questions in one place

How to use an external image in phonegap / jquerymobile application

I am developing a test application phonegap / jquery-mobile (I am new to these technologies) for Android, and I want to show the image stored on the website inside my application. When the application starts in avd, I get this notification when I put this element in my index.html:

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

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

In log.cat, I see this error:

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

I have already checked the connection both with the browser and inside my application with an external link, and in both cases I can connect to the website.

What am I missing? Is there 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: info@test.it ?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

+4
source share
6 answers

Have you really updated the whitelist of phone calls? which tells the application which URLs it has access to. You can also add * to it as described here

Hope this helps

+4
source

If you added higher values ​​to the default value:

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

It will not time out, but it will take longer to launch your application ...

+2
source

Perhaps the easiest way is to upload an image and add it to your project. In this case, the src attribute of the <img> refers to the image path inside your project.

0
source

A few notes that may help you:

  • index.html should be a full html document ...
  • you need to set permissions to use the Internet in AndroidManifest.xml
  • The test device must be connected to the Internet (first try opening the image URL in the device’s browser).
0
source

I set the whitelist in my cordova.xml to ". *", But it still displays the same error, so I tried to find other solutions and found this:

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

His solution was to redirect the page from index.html to the main page. I do not know why this worked for me, but I am happy that it is. Because of this, you may encounter other serious problems in the future.

0
source

I have the same problem. Finally, I find that the reason is setting the "Content-Security-Policy" in the html! Header. You can simply delete the line as follows:

 <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 *">
0
source

Source: https://habr.com/ru/post/1384076/

More articles:


All Articles