特定の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が期待されると背景画像が生成されたHTML上で正しく設定されているようhttps://tenant.sharepoint.com/image.jpgすべての作品のフォーマットです。 URLの形式がhttps://sitename.com/GetLogo?id='RandomGUID'の場合、結果のdivに属性 style="background-image: url('https://SomeImageUrl')"が作成されません。ビルドチェーンのどこかでこれが取り除かれているのか、それともReactが正しく処理していないのか分かりません。 GUIDベースのイメージURLを直接参照することができ、うまくレンダリングされます。

Answer 1

これは、単純な単一引用符と二重引用符の問題でした。 url('${logoUrl}')をurl("${logoUrl}")に変更し、すべて正常に動作します。