put jpg data from xmlhttprequest into <img /> tag

here is some part of my code

xmlhttp.open("GET", theUrl, true);
document.imglive.innerHTML = '<img src="data:image/jpeg,' + xmlhttp.responseText + '"/>';

that don´t seem to work. i also tried

document.imglive.src= xmlhttp.responseText;

that neither worked

I checked some of the asked questions here but none of the answers where helping at this porblem.



Use base64 for these things. In modern browsers there's this btoa native function that may help you:

document.imglive.innerHTML = "<img src='data:image/jpeg;base64," + btoa(xmlhttp.responseText) + "'/>";

For other browsers there are simple emulated implementations, just check them out.

P.S.: don't pollute the document object, use a separate variable or a namespace.


If you are happy with IE10+, you can use xhr.responseType = 'blob' in conjunction with window.URL.createObjectURL() (to get free support for getting the correct mime type).

xhr.responseType = 'blob';
xhr.onload = function(response) {
  var url = window.URL.createObjectURL(response);
  document.imglive.src = url; // from your example code
xhr.open("GET", theUrl, true);


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.