图像未显示在 Phone Gap 应用程序中
Posted
技术标签:
【中文标题】图像未显示在 Phone Gap 应用程序中【英文标题】:Images not displaying in Phone Gap app 【发布时间】:2015-11-13 12:39:06 【问题描述】:我对 Phone Gap 还很陌生。我对 html 和 jQuery 有一个清晰的了解。在 HTML 中看似非常简单的东西,在 Phone Gap 中使用时却变得不那么简单了。
目前我正在 android 设备上对其进行测试。
我正在尝试显示图像,正在从服务器中提取图像。
输出 HTML
<h3>The Bass Angler</h3>
<table>
<tr>
<td><strong>Price: </strong>R35</td>
</tr>
<tr>
<td>
<img style="width: 50%; height: 50%" src="http://www.adventurebuddy.co.za/uploads/cover.PNG" />
</td>
</tr>
</table>
jQuery
function ViewMag(id)
db.transaction(function(tx)
tx.executeSql("select magid,name,price from mag where magid = " + id + " order by name", [],
function(tx, rs)
html = '<br /><h3>' + rs.rows.item(0).name + '</h3>';
html += '<table><tr><td><strong>Price: </strong>R' + rs.rows.item(0).price + '</td></tr>'
// Load editions for a magazine
db.transaction(function(tx1)
tx1.executeSql("select editionid,editiondate,filepath,cover from editions where deleted is null and magid = " + id, [],
function(tx1,rs1)
if(rs1.rows.length == 0)
html += '<p>No editions found.</p>';
else
//html += '<ul class="">';
for(ri1=0;ri1<rs1.rows.length;ri1++)
var coverurl = APPSERVER + '/uploads/' + rs1.rows.item(ri1).cover;
var file = APPSERVER + '/uploads/' + rs1.rows.item(ri1).filepath
html += '<tr><td><img style="width: 50%; height: 50%" src="' + coverurl + '" /></td></tr>'
html += '</table>';
);
);
$.ui.updatePanel('#main',html);
$.ui.setTitle(rs.rows.item(0).name);
$.ui.loadContent('#main',false,false,"right");
,
window.onDBError
);
);
如果我将 HTML 代码保存为 htm 文件,它可以正常工作,但不能在手机上工作。我错过了什么?
在此先感谢
【问题讨论】:
您的问题解决了吗? 【参考方案1】:您需要将域列入白名单。阅读here。
这就是说你需要添加
<access origin="http://www.adventurebuddy.co.za" />
到config.xml
文件,以告知PhoneGap 这不是木马试图访问随机URL 的红色信号
编辑:让 OP 使用“hack”。
现在,您可以将img
元素分配给id
。
<img style="width: 50%; height: 50%" id="image" />
然后,通过您的 javascript(使用 jQuery),您可以执行以下操作:
$.ajax(
url: 'http://www.adventurebuddy.co.za/uploads/cover.PNG',
type: "GET",
success: function( data )
var f = $( "#image" ).attr( "src", data );
console.log(f); // just to check it.
,
error: function( xhr, status, thrownErorr )
console.log( xhr + "\r\n" + status + "\r\n" + thrownError );
);
如果这不起作用,则表示您的手机正在阻止对该网址的请求,您需要进入设备日志。
【讨论】:
这是在 config.xml 我还看到配置文件中包含了白名单插件 当您在手机上尝试时它给出的任何具体错误? 我测试了该代码,它似乎得到了图像,从而消除了这种可能性 根据一些消息来源,这似乎是不可能的。那个hack是我们能做的最好的。 :(【参考方案2】:我找到了解决问题的方法。
变量 html 超出了函数 db.transaction() 的范围。我不得不重组我的函数并最终将一些代码移到一个新函数中
jQuery
function ViewEditions(id)
$.ui.loadContent('#editions',false,false,"right");
db.transaction(function(tx)
tx.executeSql("select editionid,editiondate,filepath,cover from editions where deleted is null and magid = " + id, [],
function(tx,rs)
if(rs.rows.length == 0)
html = '<p>No editions found.</p>';
else
html = '<ul class="list">';
for(ri=0;ri<rs.rows.length;ri++)
var coverurl = APPSERVER + '/uploads/' + rs.rows.item(ri).cover;
var file = APPSERVER + '/uploads/' + rs.rows.item(ri).filepath
html += '<li><a href="#" onclick="downloadFile(' + file + ',' + rs.rows.item(ri).filepath + ');"><img style="width: 50%; height: 50%" src="' + coverurl + '" /><div align="left">' + rs.rows.item(ri).editiondate + '</div></a></li>';
html += '</ul>';
$('#editionsresults').html(html);
,window.onDBError
);
);
;
【讨论】:
以上是关于图像未显示在 Phone Gap 应用程序中的主要内容,如果未能解决你的问题,请参考以下文章
(ios + phone gap) - 使用仪器配置最终应用程序
ios 中 App Store 'INVALID BINARY' 中的 Phone Gap 应用商店
使用 phone gap 和 jQuery mobile 在 iOS 应用中实现 ZOOM IN 和 ZOOM OUT
flex mobile 4.5 或 phone gap 中 ios 的音量控制