web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / How to use images from...
Power Apps
Unanswered

How to use images from local in PCF control?

(0) ShareShare
ReportReport
Posted on by

Hi Folks,

 

I'm trying to build a PCF control for canvas app. I have 2 or 3 images which I would like to use which are stored in folder inside the control folder.


I'm then referring the image inside the react component as below:

 

<img className='test' src="../Icons/Available.svg"alt="image" />
 
This works fine when debugging locally using 'nom start watch'. But when I deploy the control into a canvas app, images are not loading. What am I missing here?
 
Thanks
I have the same question (1)
  • a33ik Profile Picture
    3,306 Most Valuable Professional on at

    Hello,

    Please check the following post - https://benediktbergmann.eu/2020/04/22/pcf-how-to-use-images-in-component/

  • rbn_nue Profile Picture
    on at

    Hi @a33ik 

     

    Thanks for the response. I did check the article. It is implemented for MDA. I'm looking for options in PCF for canvas app. I had tried the method mentioned in the article but it does not work. I checked the MS documentation for img element and it seems only available for MDA:

    https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/img

     

    Is there any other way to use images in PCF (from local)?

     

    Thanks

  • Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at

    Hi @rbn_nue , 

    The solution from the blog is not only for model-driven apps.
    You define the image in the manifest, and read the content in the code using gerResource.
    The docs for getResource() is for all app types: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/resources/getresource?WT.mc_id=BA-MVP-5004107


    Hope it helps!

  • rbn_nue Profile Picture
    on at

    Hi @DianaBirkelbach 

     

    Thanks for the response. I had again tried the methods (this time I used a png image). It did not work as expected. Also, in the documentation it is actually mentioned getResource is available for MDA only:

     

    rbn_nue_0-1707225804702.png

     

     

    Thanks

  • Diana Birkelbach Profile Picture
    3,072 Most Valuable Professional on at

    Hi @rbn_nue , 
    You are right! I've used it only inside MDA until now. My bad!

    As a workarround, I guess you could pass the image to the PCF from the Canvas App, through the PCF parameters.
    In case I find a better solution I'll let you know.

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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 717 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 329 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard