0

I'm not certain if this is specific to React or the build chain inside SPFx, but I'm having issues setting a background image on a div dynamically. I receive the URL from an API call to https://tenant.sharepoint.com/_vti_bin/homeapi.ashx/sites/followed?mostRecentFirst=true&start=0&count=100&fillSiteData=true to retrieve followed sites and use the below code to generate a simple site card with the site logo and title.

const Site = (props: SpSite) => {
  const {Title, Url, BannerImageUrl, Acronym, BannerColor} = props;
  const hasLogo = BannerImageUrl && BannerImageUrl.length > 0;
  const logoUrl = hasLogo ? encodeURI(BannerImageUrl) : null;
  const logoStyle: React.CSSProperties = hasLogo ? {backgroundImage: `url('${logoUrl}')`} : {backgroundColor: BannerColor};
  const siteLogo = <div className="site-logo" style={logoStyle}>{!hasLogo && Acronym}</div>;

  return (
    <div className="site-card">
      <a href={Url}>
        <div>{siteLogo}</div>
        <div className="site-text">
          <div>{Title}</div>
        </div>
      </a>
    </div>
  );
};

When the URL is in the format https://tenant.sharepoint.com/SiteImages/image.jpg (Normal Site) everything works as expected and the background image is set properly on the generated HTML. When the URL has the format of https://tenant.sharepoint.com/_api/GroupService/GetGroupImage?id='RandomGUID' (O365 Group Site) the attribute style="background-image: url('https://SomeImageUrl')" doesn't get created on the resulting div. I can't figure out if this is being stripped out somewhere in the build chain or if React isn't handling it properly. I can browse directly to the GUID based image URL and it renders just fine.

  • Can you share which endpoint you are using? – Gautam Sheth Dec 13 '17 at 15:01
  • @GautamSheth I added the endpoint URL. – Scott Cochrane Dec 13 '17 at 15:40
1

Firstly - The endpoint that you are using is unsupported and undocumented. So, someday that endpoint might abruptly stop working :)

Secondly - I investigated this issue. The issue happens only for "Modern" sites like modern communication and team sites. This made it easier for me to figure out a fix.

Each of these "modern" sites have a fixed site logo url. But the one that is available via your endpoint make another REST call to download an image (with what i guess could be some access token) and then load it (i.e - when this /_api/GroupService/GetGroupImage?id='RandomGUID' endpoint is hit, another REST call is made to download an image). So, sometimes this causes issue with the rendering of that image inside a webpart.

The fix - The logo for Modern sites resides in the Site Assets library. Its called __siteIcon__.jpg. Now, when you hit your endpoint and after you get the results, you need to check if the BannerImageUrl contains /_api/GroupService/... string, if yes, then replace it with SiteAssets/__siteIcon__.jpg.

Sample code in js:

var imageUrl = "https://tenant.sharepoint.com/sites/test/_api/GroupService/GetGroupImage?id='RandomGUID'";

if(imageUrl.indexOf("/_api/GroupService/GetGroupImage")>-1){
    var firstSection = imageUrl.split("/_api")[0];

    //render logoUrl in your UI
    var BannerImageUrl = firstSection + "/SiteAssets/__siteIcon__.jpg"; 
}
  • So in reviewing my code before implementing your fix I decided to try changing up url('${logoUrl}') and switching to url("${logoUrl}") with double ticks instead of single around the URL section. This did the trick and all works as expected. Thanks for the heads-up on the API endpoint. Since this is what's being used on the SP Home page I figure it will be around at least a little while. – Scott Cochrane Dec 13 '17 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.