Adaptive Card: Fetch and Display User Profile Image


Adaptive cards give us the option to share information in a platform-agnostic way using JSON. In our previous articles, we did see how we can share basic Adaptive cards into Microsoft Teams using Power Automate. In this article, we will see how we can extend the implementation by adding images to the card.

One of the common use cases is to fetch the User Profile Image of the user and display it in the card.

Problem Statement

Images can be rendered in multiple ways in the adaptive card like:

  • Store in SharePoint Document library and use the Base 64 image content in Card
  • Use Direct URL to a publicly hosted file within the card. But do note that, you will have to test this scenario thoroughly as not all direct links would work as expected. Direct shareable links in Onedrive/SharePoint and some of the Image hosting sites don’t render in the cards
  • Store Image in Azure Storage and use the image content in the card.

Same way, we can get the direct URLs to the user profile image in many ways. If we hit the below URLs in the browser, it would render the image:

Graphical user interface, application

Description automatically generated

However, if we use this direct URL in the Image Type of the Adaptive card, it will not be rendered in the card:

Graphical user interface, application, PowerPoint

Description automatically generated


To overcome this, we will make use of the Get User Profile Photo action and get the image content that will be used in the Adaptive Card Image Type.

We will create a scheduled flow that sends out a Morning Wish every day to the end user via an adaptive card in Teams chat which will have his profile photo as well as the Good Morning Wish.

Graphical user interface

Description automatically generated

Followed by that, we will add the Get User Photo action and provide the UPN of the user whose photo we need to pick and show in the card

Graphical user interface, application, Word

Description automatically generated

This action will output the image content which will be an object and hence we need to convert that into base64 string using the below compose action and we will use the expression:


Final step is to create the JSON that we will use in the Adaptive card and we can do this using the Adaptive card designer .

“type”: “AdaptiveCard”,
“body”: [
“type”: “Image”,
“url”: “data:image/png;base64,@{outputs(‘Compose_-_Convert_Image_to_Base_64’)}”,
“horizontalAlignment”: “Center”
“type”: “RichTextBlock”,
“inlines”: [
“type”: “TextRun”,
“text”: “Hello Priyan, Good Morning !”,
“size”: “Large”,
“weight”: “Bolder”
“horizontalAlignment”: “Center”
“$schema”: “”,
“version”: “1.2”

As we can see we have just 2 elements in the JSON:

  • Image : That holds the user profile image
  • RichTextBlock : Which contains the morning wish message

Description automatically generated with medium confidence

Test the flow

Since it is a scheduled flow, we will do a manual trigger to test the flow. It will pick the user profile photo, create the adaptive card using the JSON payload, and sent it to Teams Chat.

Graphical user interface, application, PowerPoint

Description automatically generated


Thus, we saw how to work around the issue related to picking the user profile image directly from the System URL and used the Get User Photo Power automate action to fetch the image and used it in the JSON payload of the adaptive card to render the user image

Related Articles



Priyaranjan KS is a Modern Workplace Architect primarily focused on developing and architecting solutions around Office 365,Power Platform and Azure.He is also a Microsoft Most Valuable Professional(MVP) and a Microsoft Certified Trainer(MCT)

Latest Articles