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 SharePoint 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/image.jpg everything works as expected and the background image is set properly on the generated HTML. When the URL has the format of https://sitename.com/GetLogo?id='RandomGUID' 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.

Scott Cochrane
  • 1

1 Answers1

0

Turns out that this was a simple single vs double quote issue. Switched url('${logoUrl}') to url("${logoUrl}")and all works as expected.

Scott Cochrane
  • 1