@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¶
Current User Photo¶
This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js
import { graphfi } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/photos";
const graph = graphfi(...);
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 User Photo by Size¶
This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js
import { graphfi } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/photos";
const graph = graphfi(...);
const photoValue = await graph.me.photos.getBySize("48x48").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 { graphfi } from "@pnp/graph";
import "@pnp/graph/groups";
import "@pnp/graph/photos";
const graph = graphfi(...);
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);
Current Group Photo by Size¶
This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js
import { graphfi } from "@pnp/graph";
import "@pnp/graph/groups";
import "@pnp/graph/photos";
const graph = graphfi(...);
const photoValue = await graph.groups.getById("7d2b9355-0891-47d3-84c8-bf2cd9c62177").photos.getBySize("120x120").getBlob();
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(photoValue);
document.getElementById("photoElement").setAttribute("src", blobUrl);
Current Team Photo¶
This example shows the getBlob() endpoint, there is also a getBuffer() endpoint to support node.js
import { graphfi } from "@pnp/graph";
import "@pnp/graph/teams";
import "@pnp/graph/photos";
const graph = graphfi(...);
const photoValue = await graph.teams.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 { graphfi } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/photos";
const graph = graphfi(...);
const input = <HTMLInputElement>document.getElementById("thefileinput");
const file = input.files[0];
await graph.me.photo.setContent(file);
Set Group Photo¶
import { graphfi } from "@pnp/graph";
import "@pnp/graph/users";
import "@pnp/graph/photos";
const graph = graphfi(...);
const input = <HTMLInputElement>document.getElementById("thefileinput");
const file = input.files[0];
await graph.groups.getById("7d2b9355-0891-47d3-84c8-bf2cd9c62177").photo.setContent(file);
Set Team Photo¶
import { graphfi } from "@pnp/graph";
import "@pnp/graph/teams";
import "@pnp/graph/photos";
const graph = graphfi(...);
const input = <HTMLInputElement>document.getElementById("thefileinput");
const file = input.files[0];
await graph.teams.getById("7d2b9355-0891-47d3-84c8-bf2cd9c62177").photo.setContent(file);