Dynamically Changing Images in Power Apps

Have you ever wished you could change an image using a dropdown or based on select criteria?

The key is how you reference the images you have uploaded into the Media section.

If you are changing the image based on the value in another control (i.e. displaying a laptop for a laptop selection) you can use a Switch or If statement in your image control to reference the image or use a variable in the Image property.   Some image names will need to be wrapped in single quotes. 

If you will be changing images based on a drop down (or combo box) selection you will need to use a table or collection that contains a column with the Image name as the value.   There isn’t a way to directly access the media for use in a drop down or combo box or to ‘pull’ the image names into a table or collection so you will need to build the table/collection manually, making sure that the image names in the column are wrapped in single quotes if they contain spaces or are numbers:

Table(

            {Name: “Angkor Cambodia”, Img: ‘Angkor Cambodia’},

             {Name: “Antigua and Barbuda”, Img: ‘Antigua and Barbuda’},

             {Name: “Aurora Canada”, Img: ‘Aurora Canada’}

)

Set the Image property of an image control or the BackgroundImage property of a screen to your drop down (or combo box) selection.

DDImageSelect.Selected.Img

Pro Tip:  If your images are not all the same size and need different ‘Image Position’, ‘Image Rotation’ and other settings, include a column(s) in your Table or Collection to contain that information and then set the ‘ImagePosition’ and any other property to the selected item column that contains the information.

Valid image positions are:

• Center
• Fill
• Fit
• Stretch
• Tile

For the best results, drop an image control onto your canvas and go through each image you will be using in your dropdown selection and determine the fit (image position) that gives you the best results.   You can determine the image rotation this way also.