Images Folder in PowerApps

[GLMSDev]

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.

[yashag2255]

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.

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]

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

[MannyGrewal]

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 · Accepted solution]

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]

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 

[ben-thompson]

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. 

[AnqiChen]

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:

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/image-uploa...

[DianaBirkelbach · Accepted solution]

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

[peterv333]

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.