遍历JSON为表格俱乐部列加Logo时显示[object HTMLImageElement]问题

嘿，这个问题我之前也碰到过！原因很简单：你直接把Image对象和字符串拼接的时候，JavaScript会自动把对象转换成它的默认字符串表示——也就是[object HTMLImageElement]，而不是把它渲染成实际的图片元素。给你几个可行的解决方案：

方案1：直接拼接img标签的HTML字符串 #

不用创建Image对象，直接在HTML字符串里写出img标签的完整结构，这样浏览器就能正确解析并渲染图片：

data.api.standings[0].forEach(elements => {
  var tr = document.createElement('tr');
  tr.innerHTML = '<td>' + elements.rank + '</td>' + 
                 '<td>' + elements.teamName + '<img src="' + elements.logo + '" alt="' + elements.teamName + ' Logo">' + '</td>' + 
                 '<td>' + elements.points + '</td>' + 
                 '<td>' + elements.all.matchsPlayed + '</td>' + 
                 '<td>' + elements.all.win + '</td>' + 
                 '<td>' + elements.all.draw + '</td>' + 
                 '<td>' + elements.all.lose + '</td>' + 
                 '<td>' + elements.all.goalsFor + '</td>' + 
                 '<td>' + elements.all.goalsAgainst + '</td>' + 
                 '<td>' + elements.goalsDiff + '</td>' + 
                 '<td>' + elements.forme + '</td>';
  table.appendChild(tr);
});

小贴士：加上alt属性可以提升无障碍访问体验，也能在图片加载失败时显示替代文本。

方案2：纯DOM操作（更安全） #

如果你担心字符串拼接可能带来的XSS风险（比如elements.logo或elements.teamName是不可信的用户输入），可以用纯DOM元素创建的方式，一步步把文本和图片添加到单元格里：

data.api.standings[0].forEach(elements => {
  var tr = document.createElement('tr');
  
  // 逐个创建单元格并添加内容
  // 排名单元格
  const rankTd = document.createElement('td');
  rankTd.textContent = elements.rank;
  tr.appendChild(rankTd);
  
  // 俱乐部单元格（包含队名和Logo）
  const clubTd = document.createElement('td');
  // 添加队名文本
  clubTd.appendChild(document.createTextNode(elements.teamName));
  // 创建图片元素
  const img = new Image();
  img.src = elements.logo;
  img.alt = `${elements.teamName} Logo`;
  // 把图片添加到单元格（可以调整顺序，比如图片在前）
  clubTd.appendChild(img);
  tr.appendChild(clubTd);
  
  // 剩余单元格同理创建
  const pointsTd = document.createElement('td');
  pointsTd.textContent = elements.points;
  tr.appendChild(pointsTd);
  
  const playedTd = document.createElement('td');
  playedTd.textContent = elements.all.matchsPlayed;
  tr.appendChild(playedTd);
  
  const winTd = document.createElement('td');
  winTd.textContent = elements.all.win;
  tr.appendChild(winTd);
  
  const drawTd = document.createElement('td');
  drawTd.textContent = elements.all.draw;
  tr.appendChild(drawTd);
  
  const loseTd = document.createElement('td');
  loseTd.textContent = elements.all.lose;
  tr.appendChild(loseTd);
  
  const goalsForTd = document.createElement('td');
  goalsForTd.textContent = elements.all.goalsFor;
  tr.appendChild(goalsForTd);
  
  const goalsAgainstTd = document.createElement('td');
  goalsAgainstTd.textContent = elements.all.goalsAgainst;
  tr.appendChild(goalsAgainstTd);
  
  const goalsDiffTd = document.createElement('td');
  goalsDiffTd.textContent = elements.goalsDiff;
  tr.appendChild(goalsDiffTd);
  
  const formTd = document.createElement('td');
  formTd.textContent = elements.forme;
  tr.appendChild(formTd);
  
  table.appendChild(tr);
});

方案3：使用ES6模板字符串（代码更简洁） #

如果你的运行环境支持ES6，用模板字符串可以让代码可读性更高，写法也更清爽：

data.api.standings[0].forEach(elements => {
  var tr = document.createElement('tr');
  tr.innerHTML = `
    <td>${elements.rank}</td>
    <td>${elements.teamName} <img src="${elements.logo}" alt="${elements.teamName} Logo"></td>
    <td>${elements.points}</td>
    <td>${elements.all.matchsPlayed}</td>
    <td>${elements.all.win}</td>
    <td>${elements.all.draw}</td>
    <td>${elements.all.lose}</td>
    <td>${elements.all.goalsFor}</td>
    <td>${elements.all.goalsAgainst}</td>
    <td>${elements.goalsDiff}</td>
    <td>${elements.forme}</td>
  `;
  table.appendChild(tr);
});

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