cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
GLMSDev
Level: Powered On

Images Folder in PowerApps

Hi,

 

I am in process of creating a Component for PowerApps. For which i need to have few images which are refernced in my CSS file.  How do i import the full image folder so all my CSS reference images can be seen in component.

2 ACCEPTED SOLUTIONS

Accepted Solutions

Re: Images Folder in PowerApps

I am currently doing by converting the images in base 64 formats as shown below,I have tried many different ways but was not successful

 

this.image.setAttribute("src", this._imgUrl);
let _imgUrl= "data: image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABMAAAAeCAYAAAG5yRWEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwhJREFUeNpiYEAGBw4eavjaJP8fBMACIM6zZ8/fgznv338AiwIEEBwxgqTBLJCGOxt7EdIAAQQXBSm5e3Dl/xs3b55nBJlvejC2HqaAq/YBqmq4xdgAQABhR2fPnpsPsgDZ3YwgxrdmBbiiG97rFzCh62RhZRVgALnrzs7ZKNrB4Pv379idA5LA6yKAAIKj48dP9v9HAyDnwh0A8/bdTX0M35rDUDTzirskAKUSmprbBBmvXr22X0tL0wHZT8jgddwhhq9fvx5gWrN2fSBI4Jl8EIaiN+K2DPLycgxANYlwQVDsorvx3bv377Fa09jUqgBTtHDhEge8vp81e27A9h07C9DFAQKINARKdMgAFPpAZwiAoxkWfiD6VrcHg8yPGwxPODQY5HI3MHBwcDAwAgHT7dt37oMUgMIOpAAEQPS/bg14CDCpqCgr3FnVgNUJtyaHMUhKSgiAE9Dfm7uwKpL5cApMgxUxy1tgVfREwAyScUB2gozEFp9MpTcYfvz4ycAkJSUpCBP4xMALlgTRID7Id5MmTxXEiBZksHrNOgP0/J2ArACUH/GGOnpaR8lDQPsVQfSqVWsd8cYhtmyEkRtnz5m3AF0MIMAYcSVCN1eXfEEhAQcOdg64D3///v3g06dPB7Zs3T6xvq76Ak7ngJIPKEOhB9eDBw/hGJb7YeDRo8fnYckO7rLNW7YFuDg7rgdFBgiAsrHkxUk4LQZlQLG42Qww9QcPHW50sLdrYASabFBWWnQeJPHi4W0G9kXeDOwMv4jKIC/9ljEo6luB2aCczRQQ4FcPs+HjoniiDQJ7a1MuMO39ALO1NDXimViYmQUYqASYjh47PhHGYfPrIUnzP/tyeLg9evx4IyOsvrK3swXXJyBnv1qUyiDy8jBOQ15zKDLwxy1iEBCXBfPPnTu/wNjYKBElbYFKP+SoB+WFexeOgmuxayf2/kcvkUDqMXIaMgBJohuKDkDpjWCJigwuXrq8HptBoPqMrNhBr6xAOYSi6AbVdBS5CB1cuHARVPQrUMUwYg0CABwjalJw16rhAAAAAElFTkSuQmCC";

View solution in original post

DianaBirkelbach
Level: Powered On

Re: Images Folder in PowerApps

Hi,

I had a similar Issue here : https://powerusers.microsoft.com/t5/PowerApps-Component-Framework/Subfolder-for-css-resources/m-p/28...

For now, the resources doesn't build the folder structure: they are flattened into the output folder.

Maybe you get to see your images referenced in the css, if the images are in the same folder as the css files. This worked for me. It seems that this will be fixed in the future.

Best regards,

Diana

 

View solution in original post

14 REPLIES 14
Dual Super User
Dual Super User

Re: Images Folder in PowerApps

Hi @GLMSDev 

 

For uploading all the images, please use the below Navigation:
1) Open File from the top menu.
2) Select Media in the left menu.
3) Select Browse on the right side. It will open a prompt to select the images. Multiple selection is allowed at a time.MicrosoftTeams-image (72).png

 

Note: You can upload a max of 200 MB media files.
 
Hope this Helps!
 
If this reply has answered your question or solved your issue, please mark this question as answered. Answered questions helps users in the future who may have the same issue or question quickly find a resolution via search. If you liked my response, please consider giving it a thumbs up. THANKS!
GLMSDev
Level: Powered On

Re: Images Folder in PowerApps

I am writing a component using the Typescript. In which  I have Images Folder. which I would like to load it into Component.

MannyGrewal
Level: Powered On

Re: Images Folder in PowerApps

You can place images in a folder and refer to its relative location from the css.

 

The (Webpack) npm run build command should automatically pack it up for you, and it should resolve at runtime.

Re: Images Folder in PowerApps

I am currently doing by converting the images in base 64 formats as shown below,I have tried many different ways but was not successful

 

this.image.setAttribute("src", this._imgUrl);
let _imgUrl= "data: image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABMAAAAeCAYAAAG5yRWEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwhJREFUeNpiYEAGBw4eavjaJP8fBMACIM6zZ8/fgznv338AiwIEEBwxgqTBLJCGOxt7EdIAAQQXBSm5e3Dl/xs3b55nBJlvejC2HqaAq/YBqmq4xdgAQABhR2fPnpsPsgDZ3YwgxrdmBbiiG97rFzCh62RhZRVgALnrzs7ZKNrB4Pv379idA5LA6yKAAIKj48dP9v9HAyDnwh0A8/bdTX0M35rDUDTzirskAKUSmprbBBmvXr22X0tL0wHZT8jgddwhhq9fvx5gWrN2fSBI4Jl8EIaiN+K2DPLycgxANYlwQVDsorvx3bv377Fa09jUqgBTtHDhEge8vp81e27A9h07C9DFAQKINARKdMgAFPpAZwiAoxkWfiD6VrcHg8yPGwxPODQY5HI3MHBwcDAwAgHT7dt37oMUgMIOpAAEQPS/bg14CDCpqCgr3FnVgNUJtyaHMUhKSgiAE9Dfm7uwKpL5cApMgxUxy1tgVfREwAyScUB2gozEFp9MpTcYfvz4ycAkJSUpCBP4xMALlgTRID7Id5MmTxXEiBZksHrNOgP0/J2ArACUH/GGOnpaR8lDQPsVQfSqVWsd8cYhtmyEkRtnz5m3AF0MIMAYcSVCN1eXfEEhAQcOdg64D3///v3g06dPB7Zs3T6xvq76Ak7ngJIPKEOhB9eDBw/hGJb7YeDRo8fnYckO7rLNW7YFuDg7rgdFBgiAsrHkxUk4LQZlQLG42Qww9QcPHW50sLdrYASabFBWWnQeJPHi4W0G9kXeDOwMv4jKIC/9ljEo6luB2aCczRQQ4FcPs+HjoniiDQJ7a1MuMO39ALO1NDXimViYmQUYqASYjh47PhHGYfPrIUnzP/tyeLg9evx4IyOsvrK3swXXJyBnv1qUyiDy8jBOQ15zKDLwxy1iEBCXBfPPnTu/wNjYKBElbYFKP+SoB+WFexeOgmuxayf2/kcvkUDqMXIaMgBJohuKDkDpjWCJigwuXrq8HptBoPqMrNhBr6xAOYSi6AbVdBS5CB1cuHARVPQrUMUwYg0CABwjalJw16rhAAAAAElFTkSuQmCC";

View solution in original post

GLMSDev
Level: Powered On

Re: Images Folder in PowerApps

Do you have some sort of article or code example for it. Because i have done it but it did not take and not showing image Smiley Sad

ben-thompson
Level 8

Re: Images Folder in PowerApps

https://stackoverflow.com/questions/19204674/how-do-i-display-an-image-via-css-in-my-local-environme... has a good quick overview of how to display an image referenced within a css style using paths relative to where the css file was.

 

To explicitly call display an image in your image directory within an image tax not using a relative path the end directory is something like https://site.crm?.dynamics.com/%7b636952333030005424%7d/webresources/cc_namespace.constructor/images/file.jpg

where the namespace and constructor comes from the information in the control manifest and the picture is file.jpg stored in the images folder.

 

The one thing I don't know is how consistent the seemingly random parent path /%7b636952333030005424%7d/ is across environments. 

Highlighted
PowerApps Staff AnqiChen
PowerApps Staff

Re: Images Folder in PowerApps

hi ben,

 

Regarding 'The one thing I don't know is how consistent the seemingly random parent path /%7b636952333030005424%7d/ is across environments. '

 

We actually have exposed the API,

context.resources.getResource(id: string, success: (data: string) => void, failure: () => void😞 void;
 
Here 'id' is the webresource name.
 
We also have sample here for image load:
 
 
DianaBirkelbach
Level: Powered On

Re: Images Folder in PowerApps

Hi,

I had a similar Issue here : https://powerusers.microsoft.com/t5/PowerApps-Component-Framework/Subfolder-for-css-resources/m-p/28...

For now, the resources doesn't build the folder structure: they are flattened into the output folder.

Maybe you get to see your images referenced in the css, if the images are in the same folder as the css files. This worked for me. It seems that this will be fixed in the future.

Best regards,

Diana

 

View solution in original post

PowerApps Staff peterv333
PowerApps Staff

Re: Images Folder in PowerApps

The tooling is coming out with an update where it will preserve the relative path in the output directory. Please look for an forum post containing release details towards the end of the June.

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 320 members 5,308 guests
Please welcome our newest community members: