Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Apps - Power Apps Pro Dev & ISV
Answered

Images Folder in PowerApps

(0) ShareShare
ReportReport
Posted on by 75

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.

  • sgpchenchang Profile Picture
    on at
    Re: Images Folder in PowerApps

    Hi GLMSDev,

     

    Our build tool pcf-scripts flattern the folder structure in the output folder. However, in the next release, the build tool will preserve all relative folder structures instead to avoid confusion and dependency issues. Thanks.

  • Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at
    Re: Images Folder in PowerApps

    @GLMSDevHi, I've just tried it out.

    In my css folder I have the css file and the image, and I declare them in the manifest like this:

     <resources>
     <code path="index.ts" order="1"/> 
     <css path="css/TS_DataSetGrid.css" order="1" />
     <img path="css/businessman3.png" />
    </resources>

    In my css file I use the image like this:

     background-image: url("businessman3.png");

    I see the image both using "npm start" and in dynamics form. You can see that there is no css folder in the structure, everything is in the root.

    2019-06-07 13_34_30-DevTools - core2.crm4.dynamics.com_main.aspx_appid=3412c6e1-904f-e811-a954-000d3.png

    Hope it helps.

    Best regards,

    Diana

  • GLMSDev Profile Picture
    75 on at
    Re: Images Folder in PowerApps

    Yes i did. when i unzipped the zipped file. in the bin\debug folder. I can see all of the available images. it means it has been packaged.  and then i have uploaded the same. my all other css related changes i could see but no images.

  • Ben Thompson Profile Picture
    1,400 on at
    Re: Images Folder in PowerApps

    Have you referenced the images within the controlmanifest.Input.xml file. Unless the images are listed in that document they will not be copied into the component...

  • GLMSDev Profile Picture
    75 on at
    Re: Images Folder in PowerApps

    Hi 

    I have added the images in css folder and referenced them in css accordingly. when i run the "npm start " i can see the images. however, when i try and upload the same component. and then use them. these images are not available. 

     

    after uploading it to css folder. do i need to call those images using the code ? if so,  how do i reference them in css. ???

  • peterv333 Profile Picture
    on at
    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.
  • Verified answer
    Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at
    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/286523

    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

     

  • AnqiChen Profile Picture
    on at
    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:
     
     
  • Ben Thompson Profile Picture
    1,400 on at
    Re: Images Folder in PowerApps

    https://stackoverflow.com/questions/19204674/how-do-i-display-an-image-via-css-in-my-local-environment 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. 

  • GLMSDev Profile Picture
    75 on at
    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

🌸 Community Spring Festival 2025 Challenge Winners! 🌸

Congratulations to all our community participants!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Leaderboard > Power Apps - Power Apps Pro Dev & ISV

#1
WarrenBelz Profile Picture

WarrenBelz 94 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 72 Super User 2025 Season 1

#3
mmbr1606 Profile Picture

mmbr1606 71 Super User 2025 Season 1

Overall leaderboard