cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
PiotrNC
Regular Visitor

Not loading image inside PCF control

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.

 

Untitled.png

 

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?

6 REPLIES 6
cchannon
Super User
Super User

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

PiotrNC
Regular Visitor

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>

 

 

 

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.

PiotrNC
Regular Visitor

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. 

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.

DianaBirkelbach
Super User
Super User

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.g...

 

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. 

 

 

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Power Apps Ideas

Changes to Ideas Coming

We are excited to announce a new way to share your ideas for Power Apps!

Users online (1,889)