Power Apps Image Control [How to Use]

Did you have any requirements to work with a Power Apps Image Control? If Yes, follow this Microsoft Power Apps tutorial to work on image control in Power Apps.

Moreover, you will see the key properties of a Power Apps image control and how to add an image control in the Power Apps canvas app.

Further, by taking various scenarios, I will explain how to use Power Apps image control and many more:

  • Working with Power Apps Image control from SharePoint list
  • How to upload an image using a URL in Power Apps
  • What is Power Apps Image Control Zoom?

Power Apps Image Control

Power Apps offers several built-in controls, including Image control. Power Apps Image control helps display an image from a local file or a data source.

When inserting one or multiple image controls in an app, it’s possible to display individual images that are not part of any dataset.

Utilizing HTTPS for all external images is essential to ensure compatibility with modern browsers. Furthermore, external images should be available without requiring authentication.

The screenshot below represents what a Power Apps image control looks like:

Power Apps Image Control

Power Apps Image Control Properties

In this section, I will explain all the properties of the Power Apps Image control:

Property NameDescription
AccessibleLabelThis property is assigned to a screen reader label.
ApplyEXIFOrientationDetermines whether the orientation indicated in the embedded EXIF data of the image is applied automatically.
AutoDisableOnSelectThe control is automatically disabled during the execution of the OnSelect behavior.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
CalculateOriginalDimensionsThis feature enables the utilization of the OriginalHeight and OriginalWidth properties.
DisabledBorderColorThe color of a control’s border will be affected when the “DisplayMode” property is set to Disabled.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
FillDefine the background color of the control.
FlipHorizontalConsider whether to horizontally flip the image before displaying it.
FocusedBorderColorThe color of a control’s border when it is in focus.
HoverFillThis displays the background color of a control when a user hovers the mouse pointer over it.
ImageThe name or URL of the image that appears in any image, audio, or microphone control.
ImagePositionThis displays the place of an image within a screen or control when it is not the same size. The options for positioning the image include Fill, Fit, Stretch, Tile, or Center.
ImageRotationThere are several options available to rotate an image before displaying it, such as ‘none,’ ‘clockwise’ (90 degrees), ‘counter-clockwise’ (90 degrees), and ‘clockwise’ (180 degrees).
OnSelectWhen the user clicks on a control, it specifies what action to perform.
PressedBorderColorThis refers to the color of a control’s border when a user taps or clicks on it.
RadiusBottomRightThis refers to the rounding of the bottom-right corner of a control.
TabIndexThis refers to the keyboard navigation sequence that is related to other controls.
TransparencyDecimal values between 0 and 1 determine the transparency of controls behind an image.
An opacity of 0 results in a fully opaque image, while an opacity of 0.5 indicates a semi-transparent image and an opacity of 1 signifies complete transparency.
VisibleHere, we can specify whether the Image control can be visible.

These are the properties of a Power Apps image control.

How to Add a Power Apps Image Control

I will show you how to insert an image control in Power Apps.

  • Sign in to Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert an Image control. [Click on +Insert -> Expand Media -> Select Image].
Add Power Apps Image control
  • The Power Apps image control will appear like the screenshot below:
How to add Power Apps Image control
  • By default, the image control name will be “Image1“; it is always better to provide a meaningful name [you can rename it using “img”]
Image control in Power Apps

This is how to add a Power Apps Image control in the canvas app.

How to use Power Apps Image Control

This section will explain how to work with a Power Apps Image control.

  • On the Power Apps screen, insert an Image control as shown below:
Power Apps Image Control
  • On the left-hand side, click on Media -> Select Upload as shown below:
How to use Power Apps Image control
  • It will navigate to your local device to select an image; once you select -> Click on the Open button.
How to use Image control in Power Apps
  • That image will be uploaded in media as shown below:
Add Image control in Power Apps
  • Select the Image control -> Set its Image property to the name of the file that you uploaded recently.
Tech

Where,

  1. Tech = The image name that I have added recently.
How to work with a Power Apps Image control
  • Now, that image will be added to the image control as shown below:
How to work with a Image control in Power Apps

This is how to work with a Power Apps Image control.

Power Apps Image Control From SharePoint List

I will show you how to display an image from a SharePoint list using Power Apps image control.

Example:

I have a SharePoint list [Loan Approval] that has various columns like:

Column NameData Type
User NameTitle [Single line of text]
ID ProofImage
Power Apps Image control using SharePoint list

On my Power Apps screen, I have added a Dropdown control and an Image control. The dropdown control is connected to the above SharePoint list title column.

Whenever the user selects a particular user from a dropdown, the image control will display its ID proof using the above SharePoint list image control as shown below:

Power Apps Image control

Follow the below steps to achieve this:

  • On the Power Apps screen, insert a Dropdown control -> Set its Items property to:
Distinct('Loan Approval',Title)

Where,

  1. Loan Approval = SharePoint list name
  2. Title = SharePoint list title column
Power Apps Image Control From SharePoint List
  • Insert an Image control -> Set its Image property to:
LookUp(
    'Loan Approval',
    Title = drp_UserName.Selected.Value,
    'ID Proof'.Medium
)

Where,

  1. Loan Approval = SharePoint list name
  2. Title = SharePoint list title column
  3. drp_UserName = Dropdown control name
  4. ID Proof = SharePoint list image column name
How to display the Power Apps image using the SharePoint list
  • Once the app is ready, Save, Publish, and Preview the app. When the user selects a particular user from the dropdown control, the user’s ID-proof image will be displayed on the image control.
Display the Power Apps image using the SharePoint list

This is how to use the Power Apps Image control using the SharePoint list.

Power Apps Image Control URL

This section will explain how to upload an image through a URL in the Power Apps Image control.

  • On the Power Apps screen, insert an Image control -> Set its Image property to:
"https://shotsbysonamart.files.wordpress.com/2022/05/img_0977.jpg?w=768"

Ensure the image link is enclosed with the inverted comma (” “).

Power Apps Image control using URL
  • Now, we can see that the respective image will be uploaded using the URL as shown below:
Power Apps Image control URL

This is how to upload an image using the URL in Power Apps.

Power Apps Image Control Zoom

This section will explain how to zoom the Power Apps image control using a Slider control.

Example,

You can see a Slider and Image control in the image below. When a user adjusts the value of a slider control by dragging the handle, the corresponding image control will zoom in or out accordingly, as shown below:

Power Apps Image Control Zoom

To achieve this, follow the below steps:

  • On the Power Apps screen, insert an Image control as shown below:
Power Apps image control zoom in and out
  • Insert a Slider control as shown below:
Power Apps image control zoom in
  • Select the Image control -> Set its Height property to:
2 * sld_ImageZoom.Value

Where,

  1. 2* = If we provide the 2*, the image size will be getting doubled
  2. sld_ImageZoom = Power Apps slider control name
Power Apps enlarge image on click
  • Select the Image control -> Set its Width property to:
2 * sld_ImageZoom.Value
Power Apps image control zoom out
  • Once the app is ready, SavePublish, and Preview the app. When the user increases or decreases the value of the slider control, based on that image, it will zoom in or zoom out in Power Apps as shown below:
How to zoom in on Power Apps image control

This is how to zoom the image control using a Slider control.

Conclusion

I hope this Power Apps tutorial provided complete information about Power Apps image control with various examples.

Moreover, I have explained the key properties of a Power App image control and how to add an image control in Power Apps.

Then, you have learned how to work with a Power Apps Image control and display image control using SharePoint list.

Lastly, you will have an overview of uploading an image using a URL in Power Apps and how to zoom the image control using a Slider control.

Additionally, you may like some more Power Apps tutorials: