Question

我对Phone Gap还不熟悉。我清楚地了解HTML和jQuery。在HTML中使用它时，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

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

说的是你需要添加

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

到config.xml文件，告诉PhoneGap它不是试图访问随机网址的木马的红色信号

编辑：OP使用＆＃39; hack＆＃39;。

现在，您可以为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 );
    }
 });

如果这不起作用，则表示您的手机阻止对该网址的请求，您需要进入设备日志。

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

};

图片未显示在手机差距应用中

2 个答案: