获取[object HTMLImageElement]而不是图像

Question

我正在改造我的网站，我想要一个我的服务器状态小部件在那里，我发现了一个非常好的从MCAPI.net。他们有一个演示HTML + JS代码，我使用并修改为我自己的使用。代码把所有的东西都写成文字，上线和下线，但是我不想要无聊的旧文本，我想要一个图片，绿色表示向上，红色表示向下。我在谷歌上搜索了如何让innerHTML显示一张图片，在上做了很多次。在我周围没有收到任何错误信息，但是我得到了对象HTMLImageElement。现在我被困在..。

完整的代码(它包含在它自己的HTML文件中，当它在主站点上运行时，我将它复制/粘贴到它自己的JS中)：

​

<script src="https://mcapi.us/scripts/minecraft.js"></script>
<div class="server-status">
<span class="server-online"></span>Players: <span class="players-online"></span>/<span class="players-max"></span>
</div>
<script>
  MinecraftAPI.getServerStatus('porotrails.com', {
  },
  
  function (err, status) {
	var up = new Image();
	var down = new Image();
	up.src = "images/up.png";
	down.src = "images/down.png";
    if (err) {
      return document.querySelector('.server-status').innerHTML = 'Error';
    }
	
    document.querySelector('.server-online').innerHTML = status.online ? up : down;
	document.querySelector('.players-online').innerHTML = status.players.now;
	document.querySelector('.players-max').innerHTML = status.players.max;
  });
</script>

​

我在想，由于某种原因，这条线没能完成它的工作。

document.querySelector('.server-online').innerHTML = status.online ? up : down;

TL;DR:我需要显示一个图像而不是[object HTMLImageElement]。

Answer 1

up和down是HTMLImageElement对象，而不是HTML。将它们赋值给innerHTML会将它们转换为字符串，从而生成此行中的[object HTMLImageElement]：

document.querySelector('.server-online').innerHTML = status.online ? up : down;

试着做这样的事情：

var serverOnline = document.querySelector('.server-online');
// Remove any children (unnecessary if always empty before hand).
serverOnline.innerHTML = '';
// Append the image element.
serverOnline.appendChild(status.online ? up : down);

或者，您可以创建up和down HTML字符串。

var up = '<img src="images/up.png" />';
var down = '<img src="images/down.png" />';

Answer 2

问题是，当您更改innerHTML时，它需要一个字符串，但是up和down是图像对象。与更改innerHTML不同，您可以使用appendChild将图像添加到元素中。

替换

document.querySelector('.server-online').innerHTML = status.online ? up : down;

使用

var container = document.querySelector('.server-online');
container.innerHTML = "";
container.appendChild(status.online ? up : down);

在追加图像之前，必须清除容器的内容，以便在状态更改时删除旧图像。

Answer 3

也许你可以试试字面的风格，就像这样：

var up = "<img src='images/up.png' />";
var down = "<img src='images/down.png' />";

或者使用另一种方法获取该节点的信息。

document.querySelector('.server-online').innerHTML = status.online ? up.outerHTML : down.outerHTML;