Not loading image inside PCF control

(0) Share

Report

Posted on by PiotrNC

Hello experts!

I’m trying to present image inside my custom build PCF control.

I’m using approach described in "https://benediktbergmann.eu/2020/04/22/pcf-how-to-use-images-in-component/" blog article to retrieve base64 PNG image from PCF resources and as a result I’m getting the following HTML:

<div><img id="imgSmile" src="data&colon;image/png;base64,iVBORw0KGgoAAA…">
</div>

“…” of course, represents remaining characters of the image data, I don’t want to paste here the whole one.

When I’m opening above HTML in the browser – everything works fine, and the image is displayed in the browser window.

However, when it is included inside PCF control on the model-driven PowerApp form (and I can see that exactly same HTML is generated) – the image is not loading correctly.

In the Chrome development tools “Network” tab – I can see that HTTP 400 errors about browser trying to access the following address which of course is not the valid one:

https://myenvironmentname.crm4.dynamics.com/data:image/png;base64,iVBORw0KGgoAAA...

Any idea what could be wrong? Some missing configuration? Anything else?

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (7)

Answers (0)

Sort by

cchannon 4,702 Moderator on at

Like (0)

Report
Copy link

Link copied!

Did you remember to add the reference to your img in the control manifest under "resources"?

Was this reply helpful? Yes No
PiotrNC 5 on at

Like (0)

Report
Copy link

Link copied!
Yes I did :). My "resources" section looks like that:

<resources> <code path="index.ts" order="1"/> <img path="img/Smile128.png" /> <img path="img/Sad128.png" /> </resources>

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like (2)

Report
Copy link

Link copied!
OK, well the approach you've taken here isn't usually what I do because PCF controls can get quite large when you start including additional web resources in the bundle, so I don't have a lot of additional troubleshooting steps for you... maybe you might want to try an alternative:

When I include images in a PCF, I upload them to Dataverse separately as independent web resources instead of trying to include them in the bundle. The pathing is really easy to work with, I've never noticed a performance hit, and you'll be done with setup really fast. Just create a web resource of type png, give it a name, upload your file, then in your PCF (assuming you are using react?) you can just reference the image in tsx as below:
<img src={"/WebResources/abc_mywebresourcename.png"} alt="MY WEB RESOURCE"/>

and Presto! the PCF will use the relative path to grab the png from the Dataverse web resources and take care of everything for you.

Was this reply helpful? Yes No
PiotrNC 5 on at

Like (0)

Report
Copy link

Link copied!

Hey.
Thank you for your answer! Your approach is a useful workaround I'll probably use in case I won't be able to solve the issue I'm currently fighting with.

Nevertheless, I would like to know is it currently possible to use images inside PCF control packages? Is it some platform error? Or just an issue with my solution?
I would be grateful for any additional comments or ideas.

Was this reply helpful? Yes No
cchannon 4,702 Moderator on at

Like (0)

Report
Copy link

Link copied!

Including the images in your bundle this way is ABSOLUTELY a supported approach (msft documentation on resource obj in manifest) It looks like there's just something off in your implementation of it.

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (1)

Report
Copy link

Link copied!

Hi @PiotrNC ,

I'm doing similar, and it works. Have a look to the code from my PCF npm package: https://github.com/brasov2de/pcf-utils/blob/master/src/Hooks/useResourceImage.ts#:~:text=resources.getResource(resourceName,%7D%2C%20reject)%3B

Maybe you can send us some code on how you actually get the src of the image. I'm a little curious why the "&colon;" is part of your generated src.

Was this reply helpful? Yes No
z.sam 26 on at

Like (0)

Report
Copy link

Link copied!

Hi there,
It has been a while since this post has been created. I hope that the problem has been solved.
but you could go follow this post. I have used this approach, and the no problem with it.
(Use image in pcf component)

Good luck
Sam

Was this reply helpful? Yes No