title: How to display the binary account image received from msal graph API?
body: <p>I am able to query the msal graph api by using <code>https://graph.microsoft.com/v1.0/me/photo/$value</code> but once I have the response, which based on [the documentation][1] is a binary value, I am unable to actually display this in my Vue app. I have tried using createObjectURL to make a blob and setting that as the src attribute of the img element like this:</p>
  <pre><code>const url = window.URL || window.webkitURL;
  const blobUrl = url.createObjectURL(response.data);
  document.getElementById(&quot;imageElement&quot;).setAttribute(&quot;src&quot;, blobUrl);
  </code></pre>
  <p>but I get the error:</p>
  <p><code>TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.</code></p>
  <p>I am getting the image like this:</p>
  <pre><code>axios.get(&quot;https://graph.microsoft.com/v1.0/me/photos/48x48/$value&quot;, {
     headers: {
     Authorization: &quot;Bearer &quot; + &quot;xxxxxxx&quot; // this is the auth token
      }
  })
  
  .then(response =&gt; {
      const url = window.URL || window.webkitURL;
      const blobUrl = url.createObjectURL(response.data);
      document.getElementById(&quot;imageElement&quot;).setAttribute(&quot;src&quot;, blobUrl);
  });
  ```
  
  
    [1]: https://docs.microsoft.com/en-us/graph/api/profilephoto-get?view=graph-rest-1.0
  </code></pre>