获取 [object HTMLImageElement] 而不是图像

Question

我正在改造我的网站，我想要一个我的世界服务器状态小部件，我从 MCAPI.net 找到了一个非常好的。 他们有一个演示 HTML + JS 代码，我使用并修改为我自己的使用。 代码将所有内容都写成文本，up 用于在线，down 用于离线，但我想要一个图像，而不是无聊的旧文本，绿色为向上，红色为向下。 我在谷歌上搜索了如何让innerHTML显示图像，经过了很多..

完整代码（它包含在它自己的 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 Standard方法创建新的元素节点，并将该对象传递给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> 

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的图像对象。 您可以使用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);

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

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;