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.

Highlighted
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. 

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
firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

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