Cant use base64 image inside img tag?

Question

Node js

unirest.get("MYROUTE")
.header("X-Mashape-Key", "MYKEY")
.end(function (result) {
  console.log(result.status, result.headers, result.body);
  if(result.status==200) {
    var buffer = (new Buffer(result.body.toString()));
    res.end(buffer.toString("base64")); // output content as response body
    //res.end('data:image/jpg;base64,'+result.body)
  }
});

Returns (I erased a lot, but its base64)

77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve+/vQBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDLvv73vv70AQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy77+977+9ABEIAe+/vQHvv70DASIAAhEBAxEB77+977+9AB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC++/ve+/vQDvv70QAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQy77+977+977+9CCNC77+977+9FVLvv73vv70kM2Jy77+9CQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eu+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/ve+/vQAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgvvv73vv70A77+9EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIy77+9CBRC77+977+977+977+9CSMzUu+/vRVicu+/vQoWJDTvv70l77+9FxgZGiYn

With angular I get res.data which is the base64, I try to use it inside a img tag but the image is not working?

How do I use this base64 to display images?

You need to format it as a [data-uri](http://en.wikipedia.org/wiki/Data_URI_scheme#HTML) — Marc B, Jun 01 '15 at 14:56
TemplateData.getData().then(function(res) { console.log(res.data); $('body').html(''); }, function(status) { console.log(status); }) — Michael Joseph Aubry, Jun 01 '15 at 15:11
Just a quick thought - how large is the image? Is it falling foul of this issue http://stackoverflow.com/questions/695151/data-protocol-url-size-limitations. — Anthony Blackshaw, Jun 01 '15 at 17:00

score 2 · Accepted Answer · answered Jun 01 '15 at 15:00

You're on the right track. The img tag should look something like this:

<div>
    <p>Taken from wikpedia</p>
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

The base64 you pasted into your question does look correct; however, ensure that the client is receiving the proper payload and HTML encoding isn't stripping and/or converting characters.

Thanks for the response I am logging the `res.data` and it looks fine. — Michael Joseph Aubry, Jun 01 '15 at 15:09

Cant use base64 image inside img tag?

1 Answers1