Verschwindendes Hintergrundbildstil-Attribut mit bestimmten URLs

Question

Ich bin mir nicht sicher, ob dies für React oder die Build-Kette in SPFx spezifisch ist, aber ich habe Probleme, ein Hintergrundbild dynamisch auf einem Div zu setzen. Ich erhalte die URL von einem API-Aufruf an SharePoint und verwende den folgenden Code, um eine einfache Site-Karte mit dem Site-Logo und dem Titel zu generieren.

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

Wenn die URL im Format https://tenant.sharepoint.com/image.jpg alles wie erwartet und das Hintergrundbild funktioniert ordnungsgemäß auf dem erzeugten HTML gesetzt. Wenn die URL das Format https://sitename.com/GetLogo?id='RandomGUID' hat, wird das Attribut style="background-image: url('https://SomeImageUrl')" nicht auf dem resultierenden Div erstellt. Ich kann nicht herausfinden, ob das irgendwo in der Baukette entfernt wird oder ob React es nicht richtig handhabt. Ich kann direkt auf die GUID-basierte Bild-URL zugreifen und es wird gut gerendert.

Answer 1

Es stellte sich heraus, dass dies ein einfaches Problem war. Geschaltet url('${logoUrl}') zu url("${logoUrl}") und alles funktioniert wie erwartet.