¿Cómo puedo mostrar la imagen en la tabla sabiendo su nombre?
me explico mejor; Tengo una tabla con tres campos, id, título e imagen. En la imagen se me muestra el nombre. pero necesito que se muestre la imagen.
¿Cómo puedo arreglar esto?
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>Debe usar la etiqueta de imagen para hacerlo
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();Puede mostrar la imagen utilizando su URL de origen. Por ejemplo, si la URL de su imagen que proviene de la respuesta json es https://example.com/image/url , puede mostrarla usando esta URL así:
<img src="https://example.com/image/url"/></td>`;