如何在知道此名称的表格中显示图像

Question

如何在知道其名称的表中显示图像？

我解释得更好； 我有一个包含三个字段的表，id、title 和 image。 在图像中，我显示了名称。 但我需要显示图像。

我怎样才能解决这个问题？

 let table = document.getElementById("my-table"); var xmlhttp = new XMLHttpRequest(); var url = "https://r2f5k3e89j.execute-api.us-east-2.amazonaws.com/articles"; xmlhttp.onreadystatechange = function () { var innerXmlhttp; if (this.readyState == 4 && this.status == 200) { var allart = JSON.parse(this.responseText); console.log(allart); allart.Items.forEach(item => { let child = document.createElement("tr"); child.innerHTML = ` <td>${item.id}</td> <td>${item.title}</td> <td>${item.image}</td>`; table.appendChild(child); }) } }; xmlhttp.open("GET", url, true); xmlhttp.send();

 <table id="my-table" width="90%"> <tr> <th>Id</th> <th>Title</th> <th>Image</th> </tr> </table>

Answer 1

您应该使用图像标签来这样做

 let table = document.getElementById("my-table");

        var xmlhttp = new XMLHttpRequest();
        var url = "https://r2f5k3e89j.execute-api.us-east-2.amazonaws.com/articles";
        xmlhttp.onreadystatechange = function () {
            var innerXmlhttp;
            if (this.readyState == 4 && this.status == 200) {
                var allart = JSON.parse(this.responseText);
                console.log(allart);
                allart.Items.forEach(item => {
                    let child = document.createElement("tr");
                    child.innerHTML = `
                    <td>${item.id}</td>
                    <td><a href="http://google.com">${item.title}</a></td>
                    <td><img src='${item.image}' alt='Something' /></td>`;
                    table.appendChild(child);
                })
            }
        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();

Answer 2

您可以使用其源 url 显示图像。 For example, if your image url which is coming from response json is https://example.com/image/url then you can show it by using this url like that:

<img src="https://example.com/image/url"/></td>`;