Исчезающий атрибут стиля фонового изображения с определенными URL

Question

Я не уверен, относится ли это к React или цепочке сборки внутри SPFx, но у меня возникают проблемы с динамической настройкой фонового изображения для div. Я получаю URL-адрес от вызова API для SharePoint и использую приведенный ниже код для создания простой карты сайта с логотипом и названием сайта.

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. Когда URL имеет формат https://sitename.com/GetLogo?id='RandomGUID' атрибут style="background-image: url('https://SomeImageUrl')" не создается на получающемся div. Я не могу понять, удаляется ли это где-то в цепочке сборки или React не обрабатывает это должным образом. Я могу перейти непосредственно к URL-адресу изображения на основе GUID, и он отображается очень хорошо.

Answer 1

Оказывается, это была простая проблема с одинарной или двойной кавычкой. Switched url('${logoUrl}') в url("${logoUrl}")и все работает как положено.