Power Apps Image Control: Show Pictures From a URL, a Gallery or an Upload

To show a picture in a canvas app, insert a Power Apps image control from Insert > Media > Image and set its Image property to a quoted HTTPS URL, an uploaded media file, or a column such as ThisItem.Photo.

That one property does the heavy lifting. The rest decides how the picture fits, and whether people can click it.

In this tutorial, we’ll build a small demo screen around the Power Apps image control. You’ll show an image from a URL, compare every ImagePosition value, and make the picture selectable with OnSelect and DisplayMode.

Then we’ll add one icon per gallery row with a Switch formula, and let users upload their own pictures with the Add picture control.

Build the Demo App Step by Step

I built everything here in my Service Desk Demo canvas app. A canvas app is one where you place every control yourself. If you’d like a deeper walkthrough of this part, see how to create a canvas app from a SharePoint list.

The data source is our Service Requests SharePoint list. A data source is just where the app reads its records. The columns that matter here are Title, Status and Priority.

Step 1: Go to make.powerapps.com and select Start with design on the Home page.

Step 2: Select Create from blank to start a canvas app.

Step 3: Pick Tablet in Start with a blank canvas. Power Apps Studio, the app editor, opens.

Step 4: Select Add data, search for SharePoint, and pick the SharePoint connector.

Step 5: Paste your site URL and select Connect.

Step 6: Check Service Requests and select Connect.

To set a property, select the control, pick the property in the dropdown left of the fx formula bar, then type the formula. Select Play at the top right to test, and press Ctrl+S to save.

Power Apps Image Control Properties

Here are the properties people search for most, with Microsoft’s current values. The same color and size properties show up on most controls in our Power Apps tutorials.

Property	What it does	Values
Image	The picture to show	A quoted URL, a media file name, or a column/variable
ImagePosition	How a picture fits when its size differs from the control	Fill, Fit, Stretch, Tile, Center
DisplayMode	Whether the control takes input, only shows data, or is disabled	DisplayMode.Edit, .View, .Disabled
OnSelect	Actions that run when someone taps or clicks the image	Any behavior formula
ImageRotation	Rotates the picture before showing it	None, 90, 180 or 270 degrees
FlipHorizontal / FlipVertical	Mirrors the picture	true / false
Transparency	How much shows through the picture	0 (opaque) to 1 (invisible)
RadiusTopLeft (and the other 3 corners)	Rounds each corner	A number
CalculateOriginalDimensions	Turns on OriginalWidth and OriginalHeight	true / false
AccessibleLabel, TabIndex	Screen reader text and keyboard order	Text; a number

There’s no Reset property on the Image control. If users need to clear a picture, use the Add picture control in Method 5.

Method 1: Show an Image From a URL (Recommended)

Use this when the picture already lives on the web, like a logo or a product photo.

Open Insert > Media and select Image. Rename it imgFromUrl in the Tree view.

Now pick Image in the property dropdown and type the address inside double quotes:

"https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Office%20building/3D/office_building_3d.png"

The office building picture shows on the canvas right away. When I left out the quotes, Power Apps flagged the formula with a red error and the picture went blank.

How does this work?

The Image property takes text, so a web address needs quotes like any other string. Without them, Power Apps tries to read the address as a formula.

Microsoft lists two rules for outside pictures: use HTTPS, and the picture must open without signing in. A file behind a login page won’t show.

For pictures you upload yourself, open the Media pane, upload the file, and set Image to its name without quotes. Need a person’s photo instead? Here’s how to show user profile pictures from an email.

Method 2: Set the ImagePosition Property (Fit, Fill, Stretch, Tile, Center)

Use this when the picture and the control aren’t the same shape. Our picture is square, and imgFromUrl is a wide 520 x 200 box, so the choice shows clearly.

I added a Power Apps dropdown control named ddImgPos with the five values. Then I set the image’s ImagePosition to:

Switch(ddImgPos.Selected.Value,
    "Fill", ImagePosition.Fill,
    "Stretch", ImagePosition.Stretch,
    "Tile", ImagePosition.Tile,
    "Center", ImagePosition.Center,
    ImagePosition.Fit
)

Here’s what each value does, per Microsoft’s Image properties reference:

ImagePosition	Scales the picture?	Crops?	Best for
Fit	Yes, keeps the shape	No, leaves empty bands	Logos and product photos
Fill	Yes, keeps the shape	Yes, the overflow	Banners and profile pictures
Stretch	Yes, changes the shape	No	Shapes that can distort safely
Tile	No	Yes	Background patterns
Center	No	Yes	Icons shown at their real size

With Fit, the whole building shows, with empty space on both sides.

Switching to Fill covers the whole box by zooming in, so the top and bottom are trimmed and only the middle windows show.

Stretch covers the box too, but squashes the building out of shape.

Tile repeats the picture at its own 256-pixel size, two copies across, and cuts off the top and bottom. Center shows one unscaled copy in the middle.

How does this work?

Switch compares the dropdown’s value with each text and returns the matching ImagePosition. The last argument, ImagePosition.Fit, is the fallback.

So here’s the catch: Fill and Center crop. If part of the picture matters, like a face or a logo, use Fit.

Pro Tip: Set CalculateOriginalDimensions to true, then read OriginalWidth and OriginalHeight. They tell you the real picture size, so you can size the control to match. Our office building reported 256 x 256.

Method 3: Make the Image Selectable With OnSelect and DisplayMode

Use this when the picture should act like a button, such as a logo that goes home. It works the same way as the Power Apps button OnSelect property.

Select imgFromUrl, pick OnSelect, and type:

Set(gblImgClicks, gblImgClicks + 1);
Notify("Image selected " & gblImgClicks & " time(s)", NotificationType.Information)

In Preview, a click shows an information banner, Image selected 1 time(s). Because TabIndex is 0, you can also press Tab to reach the image and Enter or Space to select it; both ran OnSelect in my test.

To turn clicking on and off, I added a second dropdown, ddImgMode, and set the image’s DisplayMode to:

Switch(ddImgMode.Selected.Value,
    "View", DisplayMode.View,
    "Disabled", DisplayMode.Disabled,
    DisplayMode.Edit
)

How does this work?

Edit is the normal mode, so OnSelect runs. Disabled stops the control from responding and paints the background with DisabledFill.

View is meant for showing data only. In my test it blocked clicks too: no banner, and the click count stayed the same.

In a real app, drive DisplayMode from a condition, the same way you’d disable a button in Power Apps: If(IsBlank(txtTitle.Text), DisplayMode.Disabled, DisplayMode.Edit).

For keyboard users, set TabIndex to 0 and give the image an AccessibleLabel. Microsoft notes that screen readers then treat the image as a button.

Method 4: Show a Different Image in Each Gallery Row

Use this when every record needs its own picture, like a status icon. If your list already stores photos, see how to show an image from a SharePoint list.

I inserted a vertical gallery, set its Items to 'Service Requests', and added an Image control inside the first row. Its Image property picks a picture by status:

Switch(ThisItem.Status.Value,
    "New", "https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Sparkles/3D/sparkles_3d.png",
    "In Progress", "https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Hourglass%20not%20done/3D/hourglass_not_done_3d.png",
    "https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Check%20mark%20button/3D/check_mark_button_3d.png"
)

A second, smaller image does the same with Priority, showing a red, yellow or green dot.

How does this work?

ThisItem is the current row. Switch reads its Status and returns one of three URLs, so every row shows its own icon.

Set the row image’s OnSelect to Select(Parent) so a click selects the row, as covered in our Power Apps gallery OnSelect guide. For document icons, see how to show file type icons in a gallery.

Method 5: Let Users Upload a Picture With the Add Picture Control

Use this when users bring their own pictures, such as a photo of a broken printer. The Image control only shows pictures; Add picture lets people pick one.

Open Insert > Media > Add picture. It’s a group of two controls: an Image (UploadedImage1) and an Add picture button (AddMediaButton1).

Then add a button with this OnSelect, and a small gallery with Items colPics whose image uses ThisItem.Value:

Collect(colPics, AddMediaButton1.Media);
Reset(AddMediaButton1)

How does this work?

AddMediaButton1.Media holds the picked picture. Collect adds it to colPics, a collection, which is a table that lives inside the app. Our post on how to add an image to a Power Apps collection goes further.

Reset(AddMediaButton1) then clears the box back to Tap or click to add a picture for the next one. That’s the reset the plain Image control can’t do.

Two things surprised me. Clicking the button before picking anything still added an empty row to colPics, so check that a picture was picked first. And IsBlank(UploadedImage1.Image) returned false even on the empty box, because the placeholder counts as an image.

To keep pictures after the app closes, Patch them to a data source. Here’s how to upload images to a Dataverse image column. On phones, set UseMobileCamera to true to force the camera, or use the Power Apps camera control.

Style the Image: Fill, Transparency, Rounded Corners, Flip and Rotate

These properties change the look without touching the picture file. I wired two toggles and a dropdown to imgFromUrl:

• Transparency: If(tglFade.Value, 0.5, 0). Microsoft defines 0 as opaque, 0.5 as semi-transparent and 1 as invisible.
• FlipHorizontal: tglFlip.Value mirrors the picture.
• ImageRotation: a Switch on ddImgRot returns ImageRotation.Rotate90, Rotate180, Rotate270 or None.

For rounded corners, set all four Radius properties. A square control with every radius at Self.Height / 2 becomes a circle, the usual look for a user photo or initials.

Which Method Should You Use?

Situation	Use
One fixed picture from the web	Method 1: Image = a quoted HTTPS URL
Picture and control are different shapes	Method 2: ImagePosition Fit (no crop) or Fill (no bands)
The picture should be clickable	Method 3: OnSelect + DisplayMode
A picture per record	Method 4: Switch on a column inside a gallery
Users upload or take photos	Method 5: Add picture, then Collect or Patch

Things to Keep in Mind

• Picture doesn’t show from a URL: check the quotes, use HTTPS, and open the URL in a private browser window. If it asks you to sign in, Power Apps can’t load it.
• Can’t clear the picture: the Image control has no Reset. Use Add picture and Reset(AddMediaButton1), or set Image to a variable and flip it with a toggle.
• Faces or logos get cut off: Fill and Center crop. Switch ImagePosition to Fit.
• Decorative icons read aloud: leave AccessibleLabel empty for pictures that only decorate, as Microsoft recommends.
• iPhone photos lose details: Microsoft notes images added on iOS through Add picture don’t keep metadata like orientation or location.

If you build apps like this at work, our Power Apps training course covers controls, galleries and data step by step.

Want more picture tricks in your apps? These pair well with this one:

• How to Dynamically Display Image in Power Apps?
• How to Add an Image to a PDF Form in Power Apps?
• Create a Horizontal Scrollable Gallery in Power Apps [With Headers]
• How to Display Power Apps Collection on Gallery?

Frequently Asked Questions