cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Nijo Helper I
Helper I

Images refereed in react framework's CSS is not loading in PCF

Hi,

I'm using a react component with PCF, the component uses primefaces library, and CSS, and it refers to some SVG images and some other assets. I tried manually referring the said assets in PCF manifest but it's not loading the images in the control, has anyone tried this before? am I missing some other configurations?

Many thanks 

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
RAWilson Resolver I
Resolver I

Re: Images refereed in react framework's CSS is not loading in PCF

Could you please post how you referenced the resource files in your manifest file?  Also could you post a few of the places in the code where it references the resources.  My first guess is that it's a path issue.

 

Rick

View solution in original post

PowerMaverick Advocate III
Advocate III

Re: Images refereed in react framework's CSS is not loading in PCF

Please post how they are referred in CSS. As @RAWilson suggested it may be the path issue. As both images and CSS are in same folder structure when referring them in css you will need font/external.svg

View solution in original post

4 REPLIES 4
RAWilson Resolver I
Resolver I

Re: Images refereed in react framework's CSS is not loading in PCF

Could you please post how you referenced the resource files in your manifest file?  Also could you post a few of the places in the code where it references the resources.  My first guess is that it's a path issue.

 

Rick

View solution in original post

Nijo Helper I
Helper I

Re: Images refereed in react framework's CSS is not loading in PCF

Hi

I am using a CSS, that CSS refers to some icon assets through inline. I have 10's of assets that were referenced by the CSS library I use in my app, I could track the folder structure and put the assets in the relative path like the library originally did
I referenced the manifest file like below

<css path="CSS/primereact.min.css" order="2" />
<css path="CSS/theme.css" order="2" />
<css path="CSS/primeicons.css" order="2" />
<img path="CSS/fonts/external-link.svg"  />
<img path="CSS/fonts/chevron-down.svg"  />


As you can see, I organised the assets folder relative to the way the CSS originally managed them, my PCF control is loading the CSS but not it's not picking the images.
Many Thanks

Nijo

 

 

PowerMaverick Advocate III
Advocate III

Re: Images refereed in react framework's CSS is not loading in PCF

Please post how they are referred in CSS. As @RAWilson suggested it may be the path issue. As both images and CSS are in same folder structure when referring them in css you will need font/external.svg

View solution in original post

Nijo Helper I
Helper I

Re: Images refereed in react framework's CSS is not loading in PCF

Hi,

@RAWilson @PowerMaverick   Yes I got the issue in the CSS it was referred as  

 src:url('./fonts/primeicons.svg?#primeicons') format('svg');

It is working when I changed to

 src: url('fonts/primeicons.svg?#primeicons') format('svg');

 

Thank you.

Nijo

Helpful resources

Announcements
MBAS Gallery 2020

MBAS Gallery 2020

Watch Microsoft Business Applications Summit sessions on-demand.

‘Better Together’ T-Shirt Contest – Winner Announced!

‘Better Together’ T-Shirt Contest – Winner Announced!

And the winner is...

firstImage

New Ranks and Rank Icons released on April 21!

The time has come: We are finally able to share more details on the brand-new ranks coming to the Power Apps Community!

Power Platform 2020 release wave 1 plan

Power Platform 2020 release wave 1 plan

Features releasing from April 2020 through September 2020

Users online (6,095)