Microsoft Graph - Unable to Display User Profile Photos
<p>I'm writing an app that requests user profile photos from Microsoft Graph. Everything goes through fine - the request returns with a 200 status code, there's clearly a large chunk of data that gets returned and everything seems okay at the outset. But when I actually try to insert the photo into an image tag, the browser refuses to display it. Now as I understand it, Graph returns the image as a jpeg binary, but every method I know of/have searched for to convert the image binary into a browser-displayable format has failed.</p>

<ul>
<li><p>Using btoa produces this error: </p>

<p>Uncaught DOMException: Failed to
execute 'btoa' on 'Window': The string to be encoded contains
characters outside of the Latin1 range.</p></li>
<li>Using a FileReader in the following manner (with TypeScript and
jQuery) produces a result, but the browser still doesn't render it:</li>
</ul>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//Where photo is the data as a string
let blob = new Blob([photo], { type: "image/jpeg" });
let reader = new FileReader();
reader.addEventListener("load", (e: any) =&gt; {
    let imgSrc = e.target.result;
    $("img").attr("src", imgSrc);
});
reader.readAsDataURL(blob);</code></pre>
</div>
</div>
</p>

<ul>
<li>Using URL.createObjectURL like so also parses, but doesn't display anything</li>
</ul>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let blob = new Blob([photo], { type: "image/jpeg" });
let url = URL.createObjectURL(blob);
$("img").attr("src", url);</code></pre>
</div>
</div>
</p>

<ul>
<li>Trying various permutations on the type property like different image formats and 'octet-binary' in the blob constructor also fails. Besides, the image is obviously a JPEG since printing it out as a string in Chrome's debugger shows "JFIF" in the first several characters</li>
<li>Trying the custom hex-to-base64 function from the top answer to this question also fails: <a href="https://stackoverflow.com/questions/14915058/how-to-display-binary-data-as-image-extjs-4">How to display binary data as image - extjs 4</a></li>
</ul>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("img").attr("src", "data:image/jpeg;base64," + hexToBase64(photo));</code></pre>
</div>
</div>
</p>

<ul>
<li>And of course, just embedding the unmodified image binary as a data source also fails.</li>
</ul>

<p>I'm completely out of ideas at this point. Anyone have any suggestions?</p>