Display SharePoint Images in Power Pages using Microsoft Graph API

Overview:

• Set up an Azure AD App for authentication
• Use Power Automate to retrieve images from SharePoint via Microsoft Graph API
• Call the flow from Power Pages using JavaScript
• Display the image on different Power Pages using Base64 encoded content

Advantages of Using Graph API for Image Retrieval in Power Pages:

Graph API offers a simple, consistent way to interact with SharePoint content (including images), abstracting the complexities of SharePoint’s.

Security and Permissions:

Graph API integrates with Azure Active Directory (Azure AD) for secure authentication and authorization where we can control access to the images based on roles and permissions, ensuring only authorized users or applications can access them.

Using Direct URLs vs. Graph API

Direct URL:

When we use a direct URL in our site, we simply linking to the image stored in SharePoint (or any other source) the URL points to a file hosted on SharePoint or another system with a direct URL, anyone who has access to the URL can view the image (if the URL is not restricted). This can cause security concerns, especially when the image contains sensitive data.

Graph API:

By using graph Api we can manage who has access to the image using Azure Active Directory (Azure AD) authentication, Graph API ensures that only users with the correct permissions can access and retrieve the image, enhancing security.

Implementation

Steps: 1

Log in to the Azure Portal, go to Azure Active Directory > App registrations, and click New registration, name the app, choose the account type, and register it. Save the Client ID and Tenant ID. Under Certificates & Secrets, create a client secret and copy it immediately.

Then Go to API permissions > Add a permission > Microsoft Graph > Application permissions, add Sites.Read.All and Files.Read.All, then click Grant admin consent.

After that we use Postman to interact with Microsoft Graph API and SharePoint, we’re essentially check how our application will authenticate and communicate with Microsoft 365 services. we begin by obtaining an access token, which serves as our app’s identity and grants us permission to make secure API requests.
In this request, we provide a few key pieces of information, often called client credentials. These include the client ID, client secret, and tenant ID, which we get from the Azure app registration. We also specify the grant type as client_credentials, and the scope as https://graph.microsoft.com/.default, which tells Microsoft we want to access Graph API using application-level permissions. Once we send the request with the correct values, Microsoft validates the credentials. If everything is correct, it responds with an access token.

After receiving the access token, we start by using a URL to target the SharePoint site we want to access then we include the access token we obtained earlier the token is used to authenticate the request, so it’s placed in the Authorization header of the API request.

Once the request is sent with the token, Microsoft Graph will validate the token and return a response that includes information about the site, including the Site ID:

when we have the site ID, send request the drive ID, which refers to a document library in SharePoint—like “Documents” or a custom library where our images or files are stored.


after we receive the derived ID which is the ID of a specific item, like a file or image, within SharePoint, then we use it to retrieve the actual content, such as an image, stored in the root directory of the document library to do this, we send a request to the Graph API using the derived ID to access the item’s content also in power automate we use url to get the images from share point.

JavaScript + Graph API Can Be Difficult in Power Pages:

Calling Microsoft Graph API directly from JavaScript in Power Pages can be challenging due to several key issues. First, obtaining and securely storing OAuth 2.0 access tokens is difficult on the client side, especially on public or anonymous sites, where exposing client secrets would pose a serious security risk.

Power Automate (Flow) Is a Better Approach in Power Pages:

Using Power Automate instead of JavaScript to call Microsoft Graph API in Power Pages offers significant advantages, especially in terms of security, reliability, and ease of integration. Power Automate manages tokens securely through pre-configured connections like “HTTP” or SharePoint connectors, eliminating the need to handle access tokens manually. Microsoft securely stores and automatically renews these tokens.

Step 2: Create Power Automate Flow to Retrieve Image

Open Power Automate and create a new instant cloud flow choose the trigger When an HTTP request is received.

After the trigger, add an HTTP action which will use Microsoft Graph to get the image from SharePoint and set the method to GET and use the URL format  enable the active Directory OAuth then add tenant id, App url, Client Id, Secret Id:

To return the image to the caller, add a Response action and set the status code to 200, and return the Base64 string in JSON format:


In Power Pages, open Settings > Site details, and set the site to Public to allow it to access the flow without requiring user login.

4o

Step 3: Display Image on Power Pages with JavaScript and HTML

On The Power Pages site (for example, in a web page or a web file), insert the following JavaScript inside a <script> tag to call the Power Automate flow and load the image dynamically:

The script runs when the page loads, sends the filename to the Power Automate flow, we used Base64 in JavaScript to handle the image response from Microsoft Graph API because Graph API often returns binary image data, and JavaScript running in the browser cannot directly render raw binary data.

Instead of converting it on the client side, the flow sends the image in Base64 format, and the JavaScript receives it and embeds it in the image element using a data URL for safe display in HTML.

Conclusion

Integrating SharePoint images into Power Pages using Microsoft Graph API offers a secure, scalable, and professional solution—especially when handling sensitive content. Using Azure AD authentication, Microsoft Graph, and Power Automate, you streamline the image retrieval process, protect data, and control access.

While direct URLs may seem simpler, they come with security trade-offs. Using Power Automate to mediate between SharePoint and Power Pages allows you to handle images efficiently without exposing secrets or access tokens in your frontend code. With Base64 encoding, you can embed images directly into your pages, improving performance and reliability.

This approach is ideal for organizations seeking a modern, secure method to dynamically display content across their Power Pages—backed by Microsoft’s enterprise-grade tools and services.

Readmore : when to extend dynamics 365 with azure

FAQ’s