javascript - 获取 [object HTMLImageElement] 而不是图像

Question

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

Answer 1

The issue is that when using .innerHTML(), you should provide a string value to become the content of the element in question, but you are using the W3C DOM Standard approach to creating a new element node and when you pass that object to the innerHTML() method, the JavaScript run-time, converts it into a string and the result is the description of that object (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>