如何在phonegap / jquerymobile应用程序中使用外部图像

时间:2011-12-01 09:35:59

标签: jquery-mobile cordova

我正在为Android开发一个phonegap / jquery-mobile测试应用程序(我是这项技术的新手),我希望在我的应用程序中显示存储在互联网站点上的图像。在avd中启动应用程序期间,当我将index.html放入此元素时收到此通知:

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

应用程序错误 - 与服务器的连接失败(文件:///android_asset/www/index.html)

在log.cat上我可以看到这个错误:

  

E / DroidGap(337):DroidGap:超时错误! - 调用webViewClient

我已经通过外部链接检查了浏览器和我的应用程序内部的连接,在这两种情况下我都可以访问网站。

我缺少什么?还存在适合Iphone的解决方案(可能相同)吗?

这是我的代码:

<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>

提前谢谢

6 个答案:

答案 0 :(得分:4)

你真的更新了phonegap的白名单吗?告诉应用程序允许访问哪些URL。您还可以为其添加* as described here

希望这有帮助

答案 1 :(得分:2)

如果您在defaultactivity中输入更高的值:

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

它不会超时但你的应用程序运行需要很长时间......

答案 2 :(得分:0)

也许最简单的方法是下载图像并将其添加到项目中。在这种情况下,只需让src标记的<img>属性引用项目中的图像路径。

答案 3 :(得分:0)

一些可能对您有所帮助的说明:

  • index.html必须是一个完整的HTML文档......
  • 您必须在AndroidManifest.xml
  • 中设置使用互联网的权限
  • 测试设备必须具有互联网连接(首先尝试在设备浏览器上打开图像网址。)

答案 4 :(得分:0)

我已将cordova.xml中的白名单设置为“。*”,但它仍然显示相同的错误,因此我尝试寻找其他解决方案并发现了这一点:

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

他的解决方案是将页面从index.html重定向到主页面。我不知道为什么它对我有用,但很高兴它确实如此。如果你看到任何问题做这个工作请做评论,我不希望将来遇到其他重大问题。

答案 5 :(得分:0)

我有同样的问题。最后我发现原因是“内容 - 安全 - 策略”设置在html的头部!你可以简单地删除这样的行:

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