Получение [object HTMLImageElement] вместо изображения

Question

Я обновляю свой сайт, и я хочу видеть виджет статуса сервера minecraft, я нашел действительно хороший из MCAPI.net. У них есть демо-код HTML + JS, который я использовал и модифицировал для своего использования. Код записывает все как текст с онлайн-и вниз для офлайн, но вместо скучного старого текста я хочу изображение, зеленое для вверх, красное для вниз. Я Googled, как получить innerHTML показать изображение, после много .. из finecking вокруг я не получил каких-либо сообщений об ошибках, но я получил [объект 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) { 
 
\t var up = new Image(); 
 
\t var down = new Image(); 
 
\t up.src = "images/up.png"; 
 
\t down.src = "images/down.png"; 
 
    if (err) { 
 
     return document.querySelector('.server-status').innerHTML = 'Error'; 
 
    } 
 
\t 
 
    document.querySelector('.server-online').innerHTML = status.online ? up : down; 
 
\t document.querySelector('.players-online').innerHTML = status.players.now; 
 
\t 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 , преобразует его в строку, а результатом является описание этого объекта (объект 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 
 
\t var up = "<img src='images/up.png'>"; 
 
\t 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'; 
 
    } 
 
\t 
 
    // Solution 1: 
 
    document.querySelector('.server-online').innerHTML = status.online ? up : down; 
 
    
 
    // Solution 2: 
 
    //document.querySelector('.server-online').appendChild(status.online ? up : down); 
 
    
 
    
 
\t document.querySelector('.players-online').innerHTML = status.players.now; 
 
\t 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 являются объектами изображения. Вместо изменения 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); 

Перед добавлением изображения, содержимое контейнера должен быть очищен так, что старые изображения удаляются при изменении состояния.