@pnp/graph/photos

A profile photo of a user, group or an Outlook contact accessed from Exchange Online or Azure Active Directory (AAD). It's binary data not encoded in base-64.

You can learn more about Microsoft Graph users by reading the Official Microsoft Graph Documentation.

IPhoto

Scenario	Import Statement
Selective 1	import { graph } from "@pnp/graph"; import {IPhoto, Photo} from "@pnp/graph/photos";
Selective 2	import { graph } from "@pnp/graph"; import "@pnp/graph/photos";
Preset: All	import { graph, IPhoto, Photo } from "@pnp/sp/presets/all";

Current User Photo

This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js

import { graph } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/photos";

const photoValue = await graph.me.photo.getBlob();
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(photoValue);
document.getElementById("photoElement").setAttribute("src", blobUrl);

Current Group Photo

This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js

import { graph } from "@pnp/graph";
import "@pnp/graph/groups";
import "@pnp/graph/photos";

const photoValue = await graph.groups.getById("7d2b9355-0891-47d3-84c8-bf2cd9c62177").photo.getBlob();
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(photoValue);
document.getElementById("photoElement").setAttribute("src", blobUrl);

Set User Photo

import { graph } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/photos";

const input = <HTMLInputElement>document.getElementById("thefileinput");
const file = input.files[0];
await graph.me.photo.setContent(file);

Set Group Photo

import { graph } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/photos";

const input = <HTMLInputElement>document.getElementById("thefileinput");
const file = input.files[0];
await graph.me.photo.setContent(file);