Unanswered

How to use images from local in PCF control?

(0) Share

Report

Posted on by rbn_nue

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:

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

Categories:

Power Apps Pro Dev & ISV

All responses (5)

Answers (0)

Sort by

a33ik 3,306 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

Hello,

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

Like
a
(0)

Report
Copy link

Link copied!

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 3,072 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

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 on at

Like
a
(0)

Report
Copy link

Link copied!

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:

Thanks
Diana Birkelbach 3,072 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

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.