In this PowerApps Tutorial, We will discuss how to display images from a SharePoint Online library in PowerApps using PowerApps gallery control.
Display images from a SharePoint Online library in PowerApps
To display images from a SharePoint Library in Power apps, We need to follow these below steps:
- Create a Document Library in SharePoint Site and Upload Images
- Create a Canvas app in PowerApps
- Add a Gallery to your App
- Connect a new Data Source and SharePoint Site to your App
- Bind the Images Data Source to Link
Create a Document Library in SharePoint Site and Upload Images
At first in the SharePoint Site, I created a new Document Library named “Team Members“. In that Library, I uploaded some images of employees as shown below.

Create a Canvas app in PowerApps
Open the Power Apps page through the Browser. Sign in your Power Apps using Microsoft account.
In the Power Apps page, Select + New app -> Canvas as shown below.

Choose Tablet layout under the Blank app section.

Add a Gallery to PowerApps App
In the Power Apps Canvas App, Select Insert -> Gallery -> Vertical layout as below screenshot.

Connect a new Data Source and SharePoint Site to your App
Expand Connectors and select the new Data Source as SharePoint as shown below. Also, you can directly search the SharePoint in the Search bar.

Provide your SharePoint Site URL for the location of your list and hit the Connect button. Also, you can directly specify the SharePoint Site Url under the Resent sites section.

Choose a SharePoint List or SharePoint Document Library (Team Members) and click on the Connect button.

Now you can see the gallery screen will appear like this below screenshot. That means, no images will appear until we bind it to the images Data Source.

You may also like, PowerApps LastSubmit() with Examples.
Bind Images Data Source to Link
Expand the Gallery1 from the left navigation. Select Image5 and go to the Advanced section (from the right side of the page).
Under the DATA Section, Change the Image name as ‘{Link}’ as like the below screenshot.
Also, you can change the name in the image formula bar (top of the screen).

Select the Gallery screen and go to the Properties section. Change the Layout as Image and title as shown below.
Go to the Edit from Fields section and provide the name to the Title section. Then all the names will appear with images like the below screenshot.

If you will preview or publish the Power Apps, you can see the output like below:

Display Document Images from SharePoint Document Library in PowerApps
The below screenshot represents a SharePoint Document Library (TSInfo Documents). This Document Library contains some documents as PDF, PPT, DOCX, mp4, etc.

In the Powerapps screen, Take a Gallery control (Insert -> Gallery -> Vertical). Connect the Data Source Connection as SharePoint and choose your SharePoint Document Library (TSInfo Documents). Connect the Library to Powerapps app.
Select the Layout as “Image, Title, and Subtitle“. Select the Image and put the below formula in the image bar as:
Image = ThisItem.Thumbnail.Medium

Once you will preview this Powerapps Gallery Screen, then all the Documents will appear with the Image, Title and Subtitle as shown below.

Also, you may like these below Powerapps tutorials:
- Create a Data Table from Excel Data using Power Apps
- How to share PowerApps with external users
- Create PowerApps App for SharePoint List
- PowerApps show hide fields based on Yes/No column
- PowerApps update data table columns
- Getting your data PowerApps
- Export PowerApps from one Tenant to another Tenant
- How to create and use PowerApps Collection
- How to add or remove an item from a collection in PowerApps
- Create Collection from SharePoint List in PowerApps
In this SharePoint PowerApps Tutorial, We discussed how to display images from a SharePoint Library in Power apps using Gallery control.
I am Bijay a Microsoft MVP (8 times – My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com
Nice, this helped.
I set the gal items to Filter(SRM, StartsWith(‘Full Path’, “SRM/2350098”), IsFolder = false)
and the Image to ThisItem.’Link to item’
I used it always like that in my apps:
ThisItem.’Link to item’
But I just noticed: If I embed the app into teams (as a tab in a channel), I don’t get a preview of the item. 🙁
Many thanks for these Topics
Some users are not seeing the images, any ideas?
Try this also if the image is not working: For the ‘image’ property: ThisItem.'{Thumbnail}’.Large
I was using this in conjunction with Filter(MySPDocLibrary,’File name with extension’=ImageFileName&”.png”) in order to only display the matching image in a ‘designed for’ one row image gallery for a signature capture.