在 AJAX 调用中获取图像而不是 url

Question

以下是我的html页面的相关部分，我想获取图像而不是图像地址（result[i].url）。另外我想知道这是否可能，因为我在这里使用了某些样式（CSS）。

function BindStudents() {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: "http://127.0.0.1:8000/memes", success: function (result) {
                   
                    var totalCount = result.length;
                    var structureDiv = "";

                    for (let i = 0; i < totalCount; i++) {
                        structureDiv += "<tr>" +
                            "     <td>" + result[i].id + "</td>" +
                            "      <td>" + result[i].name + "</td>" +
                            "             <td>" + result[i].url + "</td>" +
                            "              <td>" +result[i].caption  + "</td>" +
                            "              <td><button class='btn btn-link' onclick='return confirm(\"Are you sure you want to delete this record?\",DeleteRow(" + result[i].id + "))'>Delete</button></td>" +
                            "           </tr>";
                    }
                     
                    $("#divBody").html(structureDiv);
              
                }
            });
        }

Answer 1

如果服务器发送 URL，则服务器发送 URL。

如果你想要一张图片，那么你需要：

• 更改服务器端代码，使其发送图像（但 JSON 没有图像、文件或 blob 类型，因此您需要将其编码为文本……然后编写客户端代码来解码编码图片……然后找到某种显示方式……这可能涉及将其编码为data: URL）
• 发送 Ajax 请求以从您提供的 URL 中获取图像

---

当您创建所有其他 HTML 时，只创建一个 <img> 元素并将 src 设置为来自 JSON 的 URL 可能会简单得多。

Answer 2

只需添加一个 HTML 元素 <img>:

structureDiv += "<tr>" +
    "     <td>" + result[i].id + "</td>" +
    "      <td>" + result[i].name + "</td>" +
    "             <td><img src=\"" + result[i].url + "\"></td>" +
    "              <td>" +result[i].caption  + "</td>" +
    "              <td><button class='btn btn-link' onclick='return confirm(\"Are you sure you want to delete this record?\",DeleteRow(" + result[i].id + "))'>Delete</button></td>" +
    "           </tr>";