How to display images within Power Apps from a SharePoint list?

This Power Apps tutorial will show you how to display images from a SharePoint list within Power Apps.

We recently received a request to display images from the SharePoint list within the Power Apps while working with the canvas apps.

There is a SharePoint list having an image field that displays the images of the respective product. Now, we want to display those images from the SharePoint list to Power Apps.

To meet this requirement, the following steps are:

Table of Contents

Power Apps display images from a SharePoint list

Let us understand how to display images from a SharePoint list in the Power Apps canvas apps.

Requirement:

We have a SharePoint list named Products having an image-type column named Product Image along with different types of fields such as:

Product’s Title
Price (currency column)
Delivery date and order date (Date column)
Manufacturer (choice column)
Address (Multiline column)

PowerApps display image from SharePoint list — PowerApps display images from a SharePoint list

According to the requirements, we must display the images from the above SharePoint list in Power Apps canvas apps.

To display these SharePoint images within the Power Apps canvas apps, the following steps are:

Create a blank canvas app in Power Apps. Go to Create > Blank app > Blank canvas app > Create for this.
It will generate a blank canvas app with an empty screen. Connect the SharePoint list to the canvas app at this point. For this, go to Add Data > SharePoint > Select a list > Connect.
On the blank screen, add a horizontal gallery and connect the gallery with the SharePoint list i.e., Products.
Set the gallery’s Layout to Title and Subtitle. This will display the first two fields of the respective images from the SharePoint list, – i.e. product title and price.

Displaying SharePoint list image within the Power Apps

You can display more information about the product by adding the data label controls to the horizontal gallery and inserting the expression on the data label’s Text property below to display the various data.

Text = ThisItem.Manufacturer.Value   //to display manufacturer value 
Text = ThisItem.'Order Date'              //to display order date value
Text = ThisItem.'Deliver Date'           //to display deliver date value

Now, we can see all the details are displayed in the Power Apps horizontal gallery as shown below:

This is how to display images from the SharePoint list to the Power Apps gallery.

Display images within the Power Apps vertical gallery from a SharePoint list

Similarly, we can display SharePoint list images via a Power Apps vertical gallery. For this, we can use a vertical gallery instead of a horizontal gallery.

(Follow the above procedure to display the SharePoint data in the Power Apps vertical gallery)

Note: The Power Apps data table doesn’t allow displaying the SharePoint list images. But we can use any gallery to display the images within the Power Apps from a data source.

Recently, we published an article on How to use Power Apps Image control that covers how to use an image control based on different scenarios within the Power Apps.

Conclusion

from this Power Apps tutorial, we discussed how to display images from a SharePoint list to Power Apps horizontal gallery and vertical gallery.

You may like the following Power Apps tutorials:

Bijay Kumar

After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Out audiences are from the United States, Canada, United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a SharePoint MVP(8 times), check out My MVP Profile. I have also worked in companies like HP, TCS, KPIT, etc.