我使用 AJAX 向 API 发送请求,并使用包含图像 URL 和各种元数据的 JSON 检索响应。
我试图在 html 表中显示这些图像,但由于某种原因 localhost:8000
(我正在从本地主机测试这个)被附加在图像标签内每个网址的开头。
这是从 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
里面的url命令工作正常并且指向正确的位置:https://url-of-my-image.jpg
有人能解释一下这是怎么回事吗?有一次,问题仅出在 <img src='url'>
内的 url 上。标签。
最佳答案
看起来您有一个多余的不必要的右尖括号,请尝试:
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);
}
关于javascript - 使用 JQuery 显示表内的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35956003/