Disappearing Background Image Style Attribute With Certain URLs

Question

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.

Answer 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"; 
}