How To Use Power Apps Image Control [Detailed Guide]

This Power Apps tutorial will go over how to use the Power Apps Image control based on various scenarios.

We recently received a request to use the Power Apps image control while working with the Power Apps Canvas app.

It will also show you how to use the Power Apps Image control, which includes the following items:

Power Apps Image control
Power Apps add an Image control
Power Apps Image control properties
Power Apps Image display
Power Apps Image control zoom
Power Apps Image control base 64
Power Apps Image control URL
Power Apps image popup on hover
How to clear a Power Apps Image control?
How to reduce the Power Apps Image size?
How to check whether the Power Apps Image control is blank or not?
How to make rounded corners on a Power Apps Image?
How to hide and show the Power Apps image control?
Power Apps Image control missing
Power Apps Image control rotation
Power Apps Image OnSelect
Power Apps Image control position
Power Apps Image control with dropdown
Power Apps Image control using HTML
How to build an image collection in Power Apps?
How to send image while sending email via Power Apps?
How to set images in Power Apps?

Before working with the Power Apps image control, we should first understand what image control is.

Power Apps Image control

In Power Apps, there are different types of inbuilt controls are available. One is Image control which allows displaying of an image from a local file or a data source.

When we add one or more Image controls to the app, we can display individual images that aren’t part of a data set, or we can integrate images from records in data sources.

We can use HTTPS for all external images to ensure compatibility with modern browsers.
External images must be available without the need for authentication.

Power Apps add an Image control

Now, we will see where to find this control and how to add this to the Power Apps canvas app. The required steps are:

Open your desired Power Apps canvas app or build a new blank canvas app.
Navigate to the Insert tab.
Expand Media and there we can find the Image control.
To add the control to the screen, click on it.

We can see it will appear with the Sample image as shown above. This is how to find and add an image control to the Power Apps screen.

Also Read: How to Patch a Collection in Power Apps

Power Apps Image control properties

We can find the different types of properties under the Image control. These are:

Image: The image’s name or URL, as displayed in an image, audio, or microphone control.
ApplyEXIFOrientation: Whether to apply the orientation specified in the EXIF data integrated with the image automatically.
AutoDisableOnSelect: While the OnSelect behavior is running, the control is automatically disabled.
CalculateOriginalDimensions: Allows the OriginalHeight and OriginalWidth properties to be used.
FlipHorizontal: Whether the image should be flipped horizontally before being displayed.
FlipVertical: Whether the image should be flipped vertically before being displayed.
HoverBorderColor: When the user keeps the mouse pointer on a control, the color of its border changes.
FocusedBorderThickness: When control is focused, the thickness of its border is.
HoverFill: When the user keeps the mouse pointer on a control, the background color changes.
ImagePosition: The position of an image in a screen or control (Fill, Fit, Stretch, Tile, or Center) if it is not the same size as the image.
ImageRotation: How to rotate an image before it is displayed. None, clockwise (CW) 90 degrees, counter-clockwise (CCW) 90 degrees, and clockwise 180 degrees are possible values.
OnSelect: When a user taps or clicks a control, actions are taken.
PaddingRight: The distance between the text in a control and its right edge.
RadiusTopLeft: The distance between text in a control and the control’s left edge.
Transparency: The extent to which the controls behind an image are visible. The decimal value range is 0 to 1. Where 0 means opaque, 0.5 means semi-transparent, and 1 means completely transparent.
OriginalHeight: The original height of an image when the CalculateOriginalDimensions property is enabled.

Power Apps Image display

Now we’ll look at how to upload images to the Power Apps screen and display them using the Power Apps Image control. That means we will see how to use the Power Apps Image control to display an image within the Power Apps screen.

We are going to display a local image file using the Power Apps Image control. To achieve this, the following steps are:

On the Power Apps screen, navigate to Media.
Click on Upload and upload an image from the local system.

Add an image control to the Power Apps screen.
Insert the image’s name (i.e., Moon) on the Image’s Image property.

Image = Moon

Once we insert the image’s name, the image will display on the Power Apps screen.

PowerApps image display from local storage

This is how to display an image from the local storage via PowerApps image control.

Power Apps Image control zoom

In this section, we’ll look at how to use the zoom property in the Power Apps Image control. This means we’ll look at how to zoom in and out of a Power Apps Image control. For this, we are going to use the above moon image and the following steps are:

Solution1: Using slider with expression

By using a slider control with some specific expressions on the Power Apps screen, we can able to perform the zoom operation on the image control.

On the above Power Apps screen, add a slide control and place the control under the image control.

Select the image control and insert the below expression on the image’s Height property.

Height = 2 * Slider1.Value

where Slider1 is the name of the Power Apps slider control name.

How to add zoom function to a Power Apps image control — How to add a zoom function to a Power Apps image control

Also, insert the above same expression on the image’s Width property.

Width = 2 * Slider1.Value

How to zoom in and zoom out on Power Apps Image Control

That’s it. We can see the picture will zoom in and zoom out according to the Power Apps slider control. Let’s slide the slider control and modify the value to 55, and the image will represent as below:

Similarly, increasing or decreasing the slider value causes the image on the Power Apps screen to zoom in and out. This is how to work with the zoom operation on the Power Apps Image control.

Check Out: How to Sort Power Apps Collection [Complete tutorial]

Solution2: Using slider with variable

There is another way to work with the zoom property on the Power Apps image control. For this, we will set a variable value and use that variable to zoom the image control on the Power Apps screen.

For this, we are going to use the above example of the Power Apps image control and slider. The following steps are:

On the above Power Apps screen, insert the below expression on the slider’s OnChange property.

OnChange = Set(VarZoom, Image_Slider.Value)

Where VarZoom is the name of the global variable and Image_Slider is the name of the Power Apps slider control.

Insert the below expression on the Image control’s Height and Width properties as shown below:

Height = If(VarZoom<>Blank(),VarZoom,100)

Width = If(VarZoom<>Blank(),VarZoom,100)

Let’s preview the app and slide the slider control (Ex: 35). We can see it will zoom out the image as shown below:

This is how to zoom a PowerApps image control.

Power Apps Image control base 64

In this section, we will see how to get the base64 code from a Power Apps image control. For this, we are going to use the above example of the image that is displaying on the Power Apps screen, and the following steps are:

On the Power Apps screen, add a button control.
Insert the below expression on the button’s OnSelect property. As a result, when the user clicks on the button the Base64 code will generate.

OnSelect = Set(varBase64, JSON(Moon, JSONFormat.IncludeBinaryData))

Where varBase64 is the name of the global variable and Moon is the name of the image control that we have used.

Next, add a Power Apps Text Input control to the screen. Set the variable name in the text input’s Default property.

Default = varBase64

Convert Power Apps Image control to base64

Let’s preview the app. Once we click on the button, the base64 will be visible on the Power Apps text input as shown below:

This is how to convert and display the Power Apps Image control to base64.

Read: PowerApps camera control + Save captured image in SharePoint

Power Apps Image control URL

In this section, we will see how to display an image from the URL or web browser within the Power Apps Image control.

That means instead of uploading an image, we can display the image from the URL directly. The following steps are required for this:

On the Power Apps screen, add an image control. It will display a sample image.

Insert any image URL from the browser on the Image property of the Power Apps image control.
Make sure to enclose the URL within a double quote (Ex: “URL”)

Image = https://shotsbysonamart.files.wordpress.com/2022/05/img_0977.jpg?w=768

We can see the respective image will display within the Power Apps screen as shown below:

Power Apps display Image from URL — Power Apps display Images from URL

This is how to display an image from the URL within the Power Apps Image control.

Power Apps image popup on hover

In this section, we will see how to pop an image control on hover within the Power Apps screen.

Currently, there is no such “OnHover” property available in the Power Apps Image property to pop up the image on mouse hover. But we can achieve our requirements by following another method.

The following steps are:

On the Power Apps screen, add a Horizontal gallery.
Set the Layout as Title and subtitle.
On the gallery’s Items property insert the uploaded image names.

Items= [Moon, Sun]

Now the image will display on the Power Apps horizontal gallery.

Resize the height and width of the image control inside the gallery to fit the images.
Select the gallery and set the Transition as Pop.

Tansition = Transition.Pop

That’s all. Preview the app now. We can see, when we hover the mouse over the image, the respective image will pop out.

This is how to pop up an image control on mouse hover within the Power Apps.

Have a look: Power Apps collection filter [With real examples]

Power Apps reset Image control

In this section, we will discuss how to reset the Image control within the Power Apps. Assume there is an image in a certain app and we want to reset or clear it before uploading a new one. In this case, we can use the PowerApps Reset property.

But unfortunately, there is no such Reset property available in the Power Apps Image control. To achieve this requirement, we are going to use the Power Apps Add Picture control (under Insert > Media) instead of the Power Apps Image control.

By default, it will appear with a sample image as shown below:

By clicking on the above control while holding down the Alt key, we can now add a picture from the local drive. Suppose, we will add a picture from the local system.

We’ll add a button control to reset or clear the above image. As a result, when the user clicks the button, the above control is reset and the user is able to insert a new image.

Insert the below expression on the button’s OnSelect property.

OnSelect = Reset(AddMediaButton1)

Where AddMediaButton1 is the name of the button control under the “Add Picture” control.

Preview the app. Once the button is clicked, we can see the control will reset the image and display the sample image.

This is how to reset an Image within the Power Apps.

Power Apps reduce Image size

Here, we will see how to reduce the image size within the Power Apps image control. To reduce the image size, we can resize the height and width of the image control.

Also, we can use a slider control to increase and decrease the image size respectively. Recently, we have discussed how to reduce the image size via a Power Apps slider. You can get its answer by referring to the above topic (Power Apps Image Control Zoom).

Power Apps Image rounded corner

By default, while displaying the image via Power Apps Image control, it comes with a rectangular corner. As per the requirement, we want to convert the image to a rounded corner. The following steps are:

Assumes, we are going to display the logged-in user’s image in a Power Apps image control. For this, insert the below expression on the image control’s Image property.

Image = User().Image

To convert this image into a rounded corner, the following steps are:

Set the image’s height and width values to the same. (Ex: 220 as per our screen)

There are 4 radius properties available within the Power Apps Image control. Such as RadiusBottomLeft, RadiusBottomRight, RadiusTopLeft, and RadiusTopRight.
Insert the below expression on the RadiusBottomLeft property.

RadiusBottomLeft = Image8.Height

Similarly, insert the above expression on the rest radius properties.

RadiusBottomRight = Image8.Height
RadiusTopLeft = Image8.Height
RadiusTopRight = Image8.Height

We can see, it will make the rounded corner on the image control as shown below:

This is how to display the image in the rounded corner within the Power Apps image control.

Check out: Power Apps Collection [Complete Guide]

Power Apps Image control blank

Here’s how to show whether the Power Apps image control is blank or not. Consider the following scenario: if the Power Apps image control is blank, the specific button control and text will be disabled; otherwise, the user will be able to click and the text of the button will change.

To work with this scenario, the following steps are:

On the Power Apps screen, add an image control. Add an image to display on the image control.
Add a button control to the screen and place it under the image control.

Insert the below expression on the button’s DisplayMode property to enable and disable the button based on image availability.

DisplayMode = If(IsBlank(Image1.Image), DisplayMode.Disabled, DisplayMode.Edit)

Where Image1 is the name of the image control.

Similarly, insert the below expression on the button’s Text property to change the button’s name accordingly.

Text = If(IsBlank(Image1.Image), "Its a Blank Image", "Yes Image is there")

That’s all! We can see as an image is already there so it enables the button as well as the button’s text.

Remove the image from the Power Apps image control or change the image’s Image to None. As we can see, it will disable the button and change its name.

This is how to determine if a Power Apps Image Control is empty or not.

Power Apps hide image control

Would you like to hide the Power Apps image control with a button tap? If yes, then here is the solution. In this section, we will discuss how to hide and show a specific image with a single click. The following steps are:

On the Power Apps screen, add an image control and display an image.
Also, add a button control to the screen and place it under the image as shown below:

Insert the below expression on the button’s OnSelect property.

OnSelect = UpdateContext({VarHideImage: !VarHideImage});

Where VarHideImage is the name of the variable and ‘!VarHideImage‘ is the value of the variable.

Update the variable name on the visible property of the Power Apps Image control.

Visible = VarHideImage

Use a button to Show and Hide Power Apps image control

Again, insert the below expression on the button’s Text property.

Text = If(VarHideImage=true,"Hide","Show")

Let’s take a look at the app. We can see the image will be visible while clicking on the button and the name will be changed to “Hide“. Similarly, when we press the button again, the image is hidden and the name is changed to “Show,” as shown below:

This is how to show and hide the Power Apps image control with a button tap.

Read: Power Apps Timer Control Examples

Power Apps Image control missing

The most common problem is that the SharePoint Picture field does not appear in the PowerApps.

That means we have a SharePoint list that includes a picture field. We added a hyperlink in the picture field for each item in the list that points to a picture stored in SharePoint’s “pictures” library.

However, when we added this field to the Power Apps in Gallery and Form using an Image Control, they no longer appear. Furthermore, the images never appeared on mobile devices.

Resolution:

While working on this, keep the following points in mind:

Please ensure that the image files are not deleted from the specified SharePoint Document Library and that the file name is not changed.
You must ensure that the URL Link you entered in the Picture field points to the correct image file in the respective SharePoint Library.
The most important thing to remember is that the images will not appear on any mobile device. Actually, this is a known issue with image files stored in SharePoint Site images that require SharePoint authentication are not yet supported on mobile devices. This problem has not been resolved.
You can also remove the SharePoint List connection from the app, then re-add a new connection to the respective SharePoint List from the canvas app to see if the problem has been resolved.
Also, consider an alternative solution as the data source, and add a connection to the specified Document Library (Ex- Pictures) within the canvas app.

While connecting this library to the Power Apps, sometimes it may not display the images within the gallery as shown below:

To get rid of this situation, set the Image control’s Image property to the following expression within the Gallery:

Image =  LookUp(Pictures, 'File name with extension' = ThisItem.'File name with extension').Thumbnail.Medium

After you enter the above code, the image will appear in the Gallery on your PC and mobile device.

Power Apps Image control is not showing in Gallery

This is how we can handle the situation if the Power Apps image control is missing.

Power Apps Image control rotation

In this section, we will see how to rotate an image control within the Power Apps. That means, we can rotate an image as per the requirement with a single tap such as:

ImageRotation.None: If you choose this option, the image will appear in its normal position or will not rotate. It will be None by default.
ImageRotation.Rotate180: When we select this option, the image will be rotated 180 degrees.
ImageRotation.Rotate270: When we select this option, the image will be rotated 270 degrees.
ImageRotation.Rotate90: When we select this option, the image will be rotated 90 degrees.

Now, we will create a Power Apps radio control with rotating options for this purpose. When the user selects a radio control option, the image rotates accordingly. To work with this requirement, the following steps are:

On the Power Apps screen, add an image control that displays an image.
Add a radio control. Insert the below expression on the radio control’s Items property.

Items = ["ImageRotation.None", "rotate90", "rotate270", "rotate180"]

Insert the below expression on the radio’s OnChange property.

OnChange = UpdateContext({VarRotation: Radio1.Selected.Value})

Where VarRotation is the name of the UpdateContext variable and Radio1 is the name of the Power Apps radio control.

How to rotate a Power Apps image on screen — How to rotate a Power Apps image on the screen

Update the context variable name on the image control’s ImageRotation property.

ImageRotation = VarRotation

That’s all! We can see that when we select any option from the radio control, the image rotates accordingly.

This is how to rotate a Power Apps Image control.

Power Apps Image control OnSelect

In this section, we will see how to work with the Power Apps Image control OnSelect.

That means when a user selects an image from the Power Apps gallery, the background of the selected image changes, and the user is notified of the value of the selected image via Power Apps notification. To implement this, the following steps are:

Assumes we have prepared a Power Apps gallery that displays some images shown below:

To determine the selected image from the gallery’s item by its background, insert the below expression on the gallery’s TemplateFill property.

TemplateFill = If(ThisItem.IsSelected, ColorFade(LightGray,55%),White)

Similarly, to notify the selected image’s value on the notification bar insert the below expression on the Image control’s OnSelect property in the gallery.

OnSelect = Notify(ThisItem.Value, NotificationType.Information, 5000)

That’s it! Let’s preview the app and select an image from the Power Apps gallery. We can see that the selected image will look like this:

Change background of Power Apps Image OnSelect — Change the background of Power Apps Image OnSelect

This is how to work with the Power Apps image control using the OnSelect property.

Power Apps Image control position

Under the Power Apps Image control, there is a property named “ImagePosition” that allows the position of an image in a screen or control (Fill, Fit, Stretch, Tile, or Center) if it is not the same size as the image.

We’ll go over all of those parameters and see how the image is displayed within the Power Apps Image control.

Fill: The image fills the entire selected size. The image is proportionally scaled. Crops the image as necessary.

ImagePosition = ImagePosition.Fill

Fit: Fits the entire image into the given dimensions. The image is proportionally scaled. The image is not cropped.

Stretch: The image fills the entire specified size. As needed, it stretches the image disproportionately. The image is not cropped.

Tile: The image is repeated across the control until it reaches the specified size. The image is not scaled. Crops the image as necessary.

Center: The image is centered in the control. The image is not scaled. Crops the image as necessary.

This is how to customize the Power Apps Image control position.

Power Apps Image control with dropdown

In this section, we will see how to work with the Power Apps Image control based on the drop-down control. That means when the user selects any item from the dropdown control, the respective image will display on the Power Apps Image control.

For this the following steps are:

On the Power Apps screen, add an Image control.
Again, add a dropdown control to let the user select the items from the dropdown control.
Insert the below expression on the dropdown’s Items property:

Items = ["Blackhole", "Moon", "Sun", "Galaxy"]

Insert the below expression on the image control’s Image property.

Where,

Image = Switch(
    Image_DD.Selected.Value,
    "Blackhole",
    Blackhole,
    "Moon",
    Moon,
    "Sun",
    Sun,
    "Galaxy",
    Galaxy
)

Image_DD is the name of the Power Apps dropdown control.
“Blackhole”, “Moon”, “Sun”, and “Galaxy” are the choices of the drop-down control.
Blackhole, Moon, Sun, and Galaxy are the names of the image that are uploaded via the media gallery.

Let’s save the app and preview it. Select any item from the dropdown control (Ex: Galaxy). We can see the respective image will display within the Power Apps image control.

This is how to work with the Power Apps Image Control using the dropdown.

Power Apps Image control using HTML

Have you ever looked into using HTML tags to display images within Power Apps? If not, we’ll show you how to use HTML tags within the Power Apps image control here.

We can display an image in the Power Apps HTML Text control because it supports the tag as well as the image URL.

To display an image using the HTML Text control, the following steps are:

On the Power Apps screen, add an HTML Text control.
Insert the below expression on the HtmlText property of the control.

HtmlText = "<Center>Show your <b><font color=blue>HTML</font></b> text here.<p>
<img src=""https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTf8peeAQ8Jbw4lowjdYM9OYVJFJr8EwgGNTsJ6BtbqPdNHWz2m""
alt=""Testing"" width=""300"" height=""100""></p></center>"

We can see that once we inserted the above HTML formula, the image will display within the HTML text control as shown below:

This is how to display an image using HTML tags within Power Apps.

PowerApps image collection

In this section, we will see how to build an image collection within the Power Apps. Suppose, we are going to build an image collection on the screen’s OnVisible property. As a result, when that particular PowerApps screen will visible, an image collection will be created immediately. Additionaly, we will display that image collection on a gallery.

To work with this scenario, the following steps are:

On the Power Apps screen, insert the below expression on the screen’s OnSelect property.

OnSelect = Collect(ImageCollection, {Img: Sun, Title: "Sun"}, {Img: Moon, Title: "Moon"}, {Img: Galaxy, Title: "Galaxy"}, {Img: Flower, Title: "Flower"},{Img: Blackhole, Title: "Blackhole"})

Where,

ImageCollection is the name of the collection to collect the images.
Img, and Title are the name of the collection headers.
Sun, Moon, Galaxy, Flower, and Blackhole are the name of the images that are uploaded to the Power Apps.
“Sun”, “Moon”, “Galaxy”, “Flower”, and “Blackhole” are the title of the images.

Let’s save and publish the app. Reopen that Power Apps screen (or you can close the app and reopen it). We can see the image collection has been created in the Power Apps.

Let’s display this image collection on the Power Apps screen via a gallery.
Return to the Power Apps screen and add a vertical gallery to the Power Apps screen.
Connect the vertical gallery to the Power Apps collection (ImageCollection) and the result will appear as below:

This is how to build an image collection within the Power Apps.

Similarly, there is another post where we have described how to build a Power Apps collection using the SharePoint image column. We recommend to follow this post to get ideas how to build a collection using the SharePoint image column within the Power Apps.

Power Apps email Image

In this section, we’ll look at how to use Power Apps to send an email with an image. That means, while sending an email to a user via Power Apps, we can attach an image with that email.

For this the following steps are:

On the Power Apps canvas app, add a Email Screen. Go to New Screen > Templates > Email. An email screen will appear on the Power Apps screen.

To add the image while sending an email, add a Add Picture control to the screen and place the control besides the Message control.

Adding images to email body from PowerApps

Inside the Add Picture control, select the AddMediaButton control and insert the below expression on the OnSelect property.

OnSelect = Collect(
    ColImages,
    ({
        Name: 'New-Year-Eve' ,
        ContentBytes: UploadedImage2.Image,
        '@odata.type': ""
    })
)

Where,

ColImages is teh name of the collection to collect the images.
Name, and ContentBytes are the names of the collection’s headers.
‘New-Year-Eve’ is the name of the image.
UploadedImage2 is the name of the image control.

Next, select the send icon on the top of the Email Screen. We can find some default expression on the OnSelect property of the send icon there. Let’s modify that expression by adding the collection’s name (ColImage).

OnSelect = /*Create semicolon separated list of people to email, send the email, reset subject & message fields*/           
Set(
    _emailRecipientString,
    Concat(
        MyPeople,
        Mail & ";"
    )
);
Office365Outlook.SendEmail(
    _emailRecipientString,
    TextEmailSubject1.Text,
    TextEmailMessage1.Text,
    {
        Attachments: ColImages,    //Added the collection name
        Importance: "Normal"
    }
);
Reset(TextEmailSubject1);
Reset(TextEmailMessage1);
Clear(MyPeople)

That’s it. Let’s preview the app and send an email to a user with an image. Click on the send icon to send the email to the specified user.

It will send an email to the user on the Outlook as below:

This is how to send an email with attaching an image in Power Apps.

Power Apps set Image

In this section, we’ll look at how to use the Power Apps set image. That is, we will set different types of images that will be displayed when a button is pressed. As a result, when the user clicks the button, the Power Apps will display a different type of image each time.

For this, the following steps are:

Let’s create a collection to store the images when the app will start. On the Power Apps canvas app, insert the below expression on the Apps’ OnStart property.

OnStart = ClearCollect(Col_Image, Moon, Sun, Galaxy, Flower, Blackhole)

where,

Col_Image is the name of the collection.
Moon, Sun, Galaxy, Flower, Blackhole are the name of the images that we have already uploaded to the Power Apps.

Add a button to the screen and give a text to the button (Ex: Click Here to Change Image).
Insert the below expression on the button’s OnSelect property.

OnSelect = If(ImageIndex=CountRows(Col_Image),Set(ImageIndex,1),Set(ImageIndex,ImageIndex+1)); Set(SelectedImage,Last(FirstN(Col_Image,ImageIndex)).Url)

Where, ImageIndex, and SelectedImage are the names of the variables.

Next, add an image control and set the variable name on the image control’s Image property.

Image = SelectedImage

Where SelectedImage is the name of the variable that we have created.

Let’s publish and then exit the app. We can see the image on the image control after reopening it. We can also change the images by clicking the button.

This is how to set the images within the Power Apps.

Conclusion

From this Power Apps Tutorial, we got fundamental ideas about Power Apps image control such as:

Power Apps Image control
Power Apps add an Image control
Power Apps Image control properties
Power Apps Image display
Power Apps Image control zoom
Power Apps Image control base 64
Power Apps Image control URL
Power Apps image popup on hover
Power Apps clear Image control
Power Apps reduce Image size
Power Apps Image control blank
Power Apps Image rounded corner
Power Apps hide image control
Power Apps Image control missing
Power Apps Image control rotation
Power Apps Image control position
Power Apps Image control with dropdown
Power Apps change Images based on the value
Power Apps Image attachment
Power Apps add media with Image control
Power Apps Image control default
Power Apps Image control using HTML
How to build an image collection in Power Apps?
How to send image while sending email via Power Apps?
How to set images in Power Apps?