Question

我正在改造我的网站，我想要一个Minecraft服务器状态小部件，我从MCAPI.net找到了一个非常好的。他们有一个演示HTML + JS代码，我使用和修改自己使用。代码将所有内容都写为文本，用于在线和向下用于离线，但不是无聊的旧文本，我想要一个图像，绿色为up，红色为down。我用Google搜索了如何让innerHTML显示图片，在 A LOT .. 之后，我没有得到任何错误信息，但我得到了[对象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

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

您可以通过以下两种方式解决问题......

请勿使用.innerHTML()并使用.appendChild()代替。{li>
.appendChild()期望将对象引用传递给它，并且由于您已创建了显式对象实例（up和down），因此可以传递这些实例。
使用.innerHTML()并创建字符串值。执行此操作时，您自己创建HTML并将其作为字符串传递。

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

＆＃13;

<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>

＆＃13;

Answer 2

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 3

问题在于，当您更改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 4

也许您可以尝试文字样式，如下所示：

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;

获取[object HTMLImageElement]而不是图像

4 个答案: