javascript - 使用 JQuery 在表格内显示图像

Question

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

我试图在 html 表格中显示这些图像，但出于某种原因 localhost:8000 (我正在从本地主机对此进行测试)被附加在图像标签内每个 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 图标，因为它们指向以下 url:

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

但是，href里面的url命令工作正常并指向正确的位置:https://url-of-my-image.jpg

谁能解释一下这是怎么回事？有一次，问题仅在于 <img src='url'> 中的 url。标签。

Answer 1

看起来你有一个额外的不必要的右尖括号，试试:

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