使用JQuery在表中显示图像

时间:2016-03-12 09:39:44

标签: javascript jquery html ajax

我正在使用AJAX向API发送请求,并使用包含图片网址和各种元数据的JSON检索响应。

我正在尝试在html表中显示这些图像,但出于某种原因localhost:8000(我正在测试这个来自localhost)被附加在图像标记内的每个url的开头。

这是从AJAX响应中生成html的代码:

success: function(response) {
            var trHTML = '';
            $.each(response, function (i, item) {
                var img1 = '<a href="' + item.url1 + '"><img src=">' + item.url1 + '"></a>';
                var img2 = '<a href="' + item.url2 + '"><img src=">' + item.url2 + '"></a>';

                trHTML += '<tr><td>' + item.score + '</td><td>' + img1 + '</td><td>' + img2 + '</td></tr>';
            });
                // append results to table
                $('#resultsTable').append(trHTML);
          }

仅显示404 - img not found图标,因为它们指向以下网址:

http://localhost:8000/%3Ehttps://url-of-my-image.jpg

但是,href命令中的网址工作正常并指向正确的位置:https://url-of-my-image.jpg

有人可以解释发生了什么吗?有一次,问题只出在<img src='url'>标记内的网址。

1 个答案:

答案 0 :(得分:3)

看起来你有一个额外的不必要的闭合角括号,试试:

success: function(response) {
        var trHTML = '';
        $.each(response, function (i, item) {
            var img1 = '<a href="' + item.url1 + '"><img src="' + item.url1 + '"/></a>';
            var img2 = '<a href="' + item.url2 + '"><img src="' + item.url2 + '"/></a>';

            trHTML += '<tr><td>' + item.score + '</td><td>' + img1 + '</td><td>' + img2 + '</td></tr>';
        });
            // append results to table
            $('#resultsTable').append(trHTML);
      }