圖像無法顯示在手機差距應用程序

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

如果這不起作用，就意味着你的手機是防止請求到該網址並且您需要進入設備日誌。