reactjs - 特定の URL で背景画像のスタイル属性が消える

Question

これが React に固有なのか、SPFx 内のビルド チェーンに固有なのかはわかりませんが、div に背景画像を動的に設定する際に問題が発生しています。SharePoint への API 呼び出しから URL を受け取り、以下のコードを使用して、サイトのロゴとタイトルを含む単純なサイト カードを生成します。

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>
  );
};

URL が の形式の場合、https://tenant.sharepoint.com/image.jpgすべてが期待どおりに機能し、生成された HTML で背景画像が適切に設定されます。https://sitename.com/GetLogo?id='RandomGUID'URLに属性 の形式がある場合style="background-image: url('https://SomeImageUrl')"、結果の div で作成されません。これがビルド チェーンのどこかで取り除かれているのか、それとも React が適切に処理していないのか、私にはわかりません。GUID ベースの画像 URL を直接参照すると、問題なくレンダリングされます。