title: Get User Photo from MS Graph API and display image
body: <p>I do apologize that this is a very specific question, but I'm desperate and I'd appreciate any hints/directions.</p>
  
  <p>The scenario is the following: I'm making an <code>HTTP GET</code> request to retrieve a <a href="https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/resources/profilephoto" rel="nofollow noreferrer"><code>profilePhoto</code></a> and update the image profile in my Angular application.</p>
  
  <p>This is my <code>graph.service</code>:</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { Http, Headers } from "@angular/http";
  import { AdalService } from "../adal/adal.service";
  
  @Injectable()
  export class GraphService {
    private graphUri = "https://graph.microsoft.com/v1.0/";
  
    constructor(private http: Http, private adalService: AdalService) {}
  
    public userPhoto(upn: string) {
      return this.http
        .get(
          this.graphUri +
            "users/" +
            this.adalService.userInfo.profile.upn +
            "/photo/$value",
          { headers: this.headers() }
        )
        .map(res =&gt; res);
    }
  
    private headers() {
      const headers = new Headers();
      headers.set("Authorization", this.adalService.token);
      return headers;
    }
  }
  </code></pre>
  
  <p>On the <code>home.component</code> where I'm intending to use it, I have:</p>
  
  <pre><code>this.graphService.userPhoto().subscribe(resp =&gt; {
    if (resp.status === 200) {
      const dataToString = resp.arrayBuffer();
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(dataToString);
      // Here there's an error:
      // 'Argument of type Array Buffer is not assignable
      //  to parameter of type Blob.
      const image = "data:image/jpeg;base64," + dataToString;
      document.getElementById("photo").setAttribute("src", image);
    }
  });
  </code></pre>
  
  <p>I don't even know if I'm on the right path, to be honest... I've read somewhere about <code>FileReader</code>. But at first, this was my attempt:</p>
  
  <pre><code>this.graphService.userPhoto().subscribe(resp =&gt; {
    if (resp.status === 200) {
      const dataToString = resp.text();
      const image = "data:image/jpeg;base64," + btoa(encodeURI(dataToString));
      document.getElementById("photo").setAttribute("src", image);
    }
  });
  </code></pre>
  
  <p><code>dataToString</code> contains something like:
  <code>����JFIF``��C</code> which I understand it to be the binary data.</p>
  
  <p>Just to be clear, the <code>GET</code> request returns <code>200</code>, the bearer token is valid. I'm just somehow failing to display it... </p>
  
  <p>What am I doing wrong? How one should approach it?</p>
  
  <p>Many thanks!</p>
  
  <p><strong>Edit 1:</strong> @RasmusW - The only reason of why I've added the <code>encodeURI</code> call is because without it I'll get the following error:</p>
  
  <pre><code>ERROR DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
  </code></pre>
  
  <p>With the <code>encodeURI</code> my <code>img</code> HTML tag will look something like that:</p>
  
  <pre><code>&lt;img _ngcontent-c2="" id="photo" src="data:image/jpeg;base64, JUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJTAwJTEw(shortened)"&gt;
  </code></pre>
  
  <p>However, the image doesn't display.</p>