如何在HTML表格中显示JSON响应中的图片而非链接？

已成功将JSON响应数据加载到HTML表格中，但在显示homeTeam.logo和awayTeam.logo对应的图片时遇到问题，目前仅能显示图片链接。

解决方案 #

问题出在你直接将图片URL作为纯文本插入到表格单元格中，HTML不会自动将文本格式的URL渲染为图片，需要使用<img>标签来包裹图片链接。

修改buildTable函数中的行模板代码，将图片URL替换为<img>标签即可：

function buildTable(data){
    var table = document.getElementById('myTable')
    for (var i = 0; i < data.api.fixtures.length; i++){
    const rm = data.api.fixtures[i];

        var row = `<tr>
                   <td><img src="${rm.homeTeam.logo}" alt="${rm.homeTeam.team_name}" style="width: 50px; height: 50px;" /></td>
                   <td>${rm.event_date}</td>
                   <td><img src="${rm.awayTeam.logo}" alt="${rm.awayTeam.team_name}" style="width: 50px; height: 50px;" /></td>
                  </tr>`
        table.innerHTML += row
    }
}

修改说明： #

• <img>标签的src属性传入图片URL，指定图片的来源地址
• alt属性用球队名称作为替代文本，既提升页面可访问性，也能在图片加载失败时显示提示内容
• style属性设置固定宽高，避免图片尺寸过大破坏表格布局，可根据需求自行调整数值

内容的提问来源于stack exchange，提问作者Ashraf