title: When trying to put the image/png response of an xmlHTTPRequest I am getting garbage data
body: <p>I am using the below code to call a captcha generating web service. The response is fetched correctly but when trying to append the result under a div the image appears as garbage text</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var xmlHttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() { 
                if (xmlHttp.readyState == 4 &amp;&amp; xmlHttp.status == 200)
                 { 
                window.alert(xmlHttp.getAllResponseHeaders()); 
                   document.getElementById("captchaDiv2").innerHTML = "&lt;img src=\"data:image/png;base64," + xmlHttp.responseText + "\"/&gt;";
                 }
            }
            xmlHttp.open("GET", captchaSrc, true); // true for asynchronous 
            xmlHttp.send(null);</code></pre>
  </div>
  </div>
  </p>
  
  <p>The response header is the below, as you can see the type is image/png</p>
  
  <p><a href="https://i.stack.imgur.com/HG4gK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HG4gK.png" alt="Response header"></a>
  Yet when I try to import it inside the html I am getting the below:
  <a href="https://i.stack.imgur.com/vR8Vp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vR8Vp.png" alt="Result on the UI"></a></p>
  
  <p>Can you please advise what could be the root cause behind this? I already tried btoa() with and without encoding... No results.</p>