cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
sheldoncopper73
Level: Powered On

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";
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

 

14 REPLIES 14
Super User
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.

sheldoncopper73
Level: Powered On

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";
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: Powered On

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. 

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

 

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.