图像无法显示在手机差距应用程序

Question

我是相当新的手机差距。我对HTML和jQuery有清晰的认识。在Phone Gap中使用它时，HTML中看起来非常简单的事情并不那么简单。

目前我正在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文件，它工作正常，但在手机上不起作用。我错过了什么？

非常感谢提前

Answer 1

我找到了我的问题的解决方案。

变量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 
     ); 
    }); 

}; 

Answer 2

您需要将域列入白名单。请阅读here。

什么，说的是，你需要

<access origin="http://www.adventurebuddy.co.za" /> 

添加到​​3210文件，以告诉PhoneGap的，它不是一个木马试图访问随机网址

编辑红色信号：让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); 
    } 
}); 

如果这不起作用，就意味着你的手机是防止请求到该网址并且您需要进入设备日志。