Unanswered

Is it possible to display app internal image in an HTML control?

(3) Share

Report

Posted on by WinIOSAndroid

I am creating an 'about' page in my first test PowerApp, with an HTML control containing text about the app including images within the text.

I can include img src tags that point to an image hosted on an external site, however, I want to include image(s) packaged with the app.

I have tried putting an image control on the page which uses an image from the media section. I then created a text control whose 'Text' value I set to the image.

This returns :

ms-appdata:///local/Resources/Assets/Images/coffee.png

so I put that in my HTML control eg

"This is the PowerApp 'Test' Image from external site : <img src=""http://www.photos-public-domain.com/wp-content/uploads/2016/11/green-grass-and-blue-sky-landscape-600x450.jpg""> Image from Media : <img src=""ms-appdata:///local/Resources/Assets/Images/coffee.png"">"

The external image displays ok, but there is nothing showing for the Image from Media.

I tried removing 'ms-appdata' (///local/Resources/Assets/Images/coffee.png) and that now shows me what I believe to be the default placeholder icon for 'image not found'

Clearly the HTML control is ok with displaying images via the img tag, but is there a problem pointing to images from within the app itself?

A work around would be to have multiple HTML controls, before and after an image control, but this is less flexible and harder to maintain.

Thanks.

Categories:

Building Power Apps

I have the same question (0)

All responses (4)

Answers (0)

v-micsh-msft Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi @WinIOSAndroid,

Currently the available way to show the "Internal " image under PowerApps is using the image control.

There is no information mentioned under the official articles regarding how to display internal image through the HTML control:

Add an image, a video, or a sound

If you would like this to be available in the future, then please consider to submit this as an idea under PowerApps idea forum:

https://powerusers.microsoft.com/t5/PowerApps-Ideas/idb-p/PowerAppsIdeas

Regards

Was this reply helpful? Yes No
Justin Reading 31 on at

Like (0)

Report
Copy link

Link copied!

When I attempt to access Media images and display them in an image control the "url" is stated as "appres://resources/imagename.png" or similar. Whilst this approach works when this url is called from a SharePoint Online list as 'ThisItem.imageName', to display the image in preview mode in the Windows 10 studio App and in Internet Explorer, as soon as I publish the App and access from the PowerApps mobile device (on Android) the images will not display.

More specifically here is what I'm attempting to do:

1. Display a list of 'Titles' from the SPO site to populate a gallery (this works).
2. Have the 'imageName' URL as a selectable label (sitting above the 'Title' in the gallery) which is not visible (this works).
3. Pass the name of the label (the image url appres://etc.) to the 'Image' field in an image control (OnSelect this works)
4. Have the image control change the photo based on the label selected (this works in PowerApps Studio and IE).
5. Publish App to mobile users (App works, but images do not display).

If the images imported as "media" are package with the App I don't understand how they are not being displayed when the data that is being used for gallery is on a SPO site behind permission and MFA restrictions displays correctly....

Any advice??

Was this reply helpful? Yes No
Office365Master 338 on at

Like (0)

Report
Copy link

Link copied!

Display SharePoint Images Powered Up Style In PowerApps

Display any image stored anywhere in SharePoint Online, rendered within an app in any resolution / quality as you so desire and highly compressed in size vs. the original image actually stored in SharePoint.

Mobile Video Demo
Desktop Video Demo

Was this reply helpful? Yes No
mustafaasiroglu Microsoft Employee on at

Like (3)

Report
Copy link

Link copied!

Hello everyone, I found a workaround to show internal image including camera input in HTML control!

- Add an image control to your canvas and set image source as you wish
- Get image content base64 using following formula:
Set(imagecontent, JSON(ImageControl1.Media, IncludeBinaryData);
Set(imagecontentclean, Mid(imagecontent,2,Len(imagecontent)-2))
- Use this base64 uri in your HTML control as image src:
"<img src='"&imagecontentclean&"' width='112' height='63' />"

It works perfectly but there is a minor limitation: HTML input controls seems to start freezing when image file is large. (Means very long string is feeded as html input) I observed this issue in edit mode, it may work without an issue for end users. I hope Power Apps team improves performance issues regarding this limitation soon.

1 people found this reply helpful.

Was this reply helpful? Yes No