You’re offline. This is a read only version of the page.
5
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: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?
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
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 ":" is part of your generated src.
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.
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.
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:
Share
Report
All responses (
Answers (
<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.
#1
WarrenBelz
85
Most Valuable Professional
#2
Michael E. Gernaey
65
Super User 2025 Season 1
#3
mmbr1606
55
Super User 2025 Season 1
