获取 \[object HTMLImageElement\] 而不是图像

Question

我正在改造我的网站，我想要一个 minecraft 服务器状态小部件，我从 MCAPI.net 找到了一个非常好的小部件。他们有一个演示 HTML + JS 代码，我使用并修改为我自己使用。代码将所有内容写为文本，向上表示在线，向下表示离线，但我想要一张图像，而不是无聊的旧文本，绿色表示向上，红色表示向下。我在谷歌上搜索了如何获得 innerHTML 来显示图像，经过大量 的.. finecking around 我没有收到任何错误消息，但我得到了 [object 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] 。

原文由 Jeroen Uilhoorn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是，当使用 .innerHTML() 时，您应该提供 string 值以成为相关元素的内容，但您使用的是 W3C DOM 标准方法来创建新元素节点，当您将该对象传递给 innerHTML() 方法时，JavaScript 运行时将其转换为字符串，结果是该对象的描述（Object HTMLImageElement）。

您可以通过以下两种方式之一解决您的问题……

1. 不要使用 .innerHTML() .appendChild() 。 .appendChild() 期望将对象引用传递给它，并且由于您已经创建了显式对象实例（ up 和 down ），您可以传递它们。

2. 使用 .innerHTML() 并创建一个字符串值。执行此操作时，您自己制作 HTML 并将其作为字符串传递。

下面，我调整了您的代码以使用方法 #2，但也为解决方案 1 添加了注释代码。

 <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) {
    // Solution 1: Pass a string to innerHTML
	var up = "<img src='images/up.png'>";
	var down = "<img src='images/down.png'>";

    // Solution 2: Use DOM to create image element nodes and insert using DOM
    //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';
    }

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

    // Solution 2:
    //document.querySelector('.server-online').appendChild(status.online ? up : down);


	document.querySelector('.players-online').innerHTML = status.players.now;
	document.querySelector('.players-max').innerHTML = status.players.max;
  });
</script>

原文由 Scott Marcus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

代替

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

和

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

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

原文由 afuous 发布，翻译遵循 CC BY-SA 3.0 许可协议