How to show image in the table having the knowing the name of this

user_15051230 0
Viewed 40

How can I show the image in the table knowing its name?

I explain better; I have a table with three fields, id, title and image. In the image I am shown the name. but I need the image to be shown.

How can I fix this?

 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>

javascript
2 Answers

You should use image tag to do so

 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();
user_75076960

You can show image by using its source url. For example, if your image url which is coming from response json is https://example.com/image/urlthen you can show it by using this url like that:

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