Getting [object HTMLImageElement] instead of the image
<p>I am revamping my website and I want a minecraft server status widget on there, I found a really good one from MCAPI.net. They have a demo HTML + JS code that I used and modified to my own use. The code writes everything as text with up for online and down for offline, but instead of boring old text I want an image, green for up, red for down. I Googled how to get <code>innerHTML</code> to show an image, after <strong>A LOT..</strong> of finecking around I didn't get any error messages but I got [object HTMLImageElement] instead.. And now I'm stuck..</p>

<p>Full code (It's contained in it's own HTML file, I'll be copy/pasting it into it's own JS when it goes on the main site):</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://mcapi.us/scripts/minecraft.js"&gt;&lt;/script&gt;
&lt;div class="server-status"&gt;
&lt;span class="server-online"&gt;&lt;/span&gt;Players: &lt;span class="players-online"&gt;&lt;/span&gt;/&lt;span class="players-max"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;script&gt;
  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;
  });
&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>I'm thinking for some reason this line is failing to do it's job.</p>

<pre><code>document.querySelector('.server-online').innerHTML = status.online ? up : down;
</code></pre>

<p>TL;DR: I need to show an image instead of <code>[object HTMLImageElement]</code>.</p>