[英]How to show image in the table having the knowing the name of this
如何在知道其名稱的表中顯示圖像?
我解釋得更好; 我有一個包含三個字段的表,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>
您應該使用圖像標簽來這樣做
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();
您可以使用其源 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>`;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.