0

我不确定这是否特定于 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 上正确设置了背景图像。当 URL 具有https://sitename.com/GetLogo?id='RandomGUID'属性 的格式时，style="background-image: url('https://SomeImageUrl')"不会在结果 div 上创建。我不知道这是在构建链中的某个地方被剥离，还是 React 没有正确处理它。我可以直接浏览到基于 GUID 的图像 URL，它呈现得很好。

4

1 回答 1

0

原来这是一个简单的单引号和双引号问题。切换url('${logoUrl}')到url("${logoUrl}")并按预期工作。

于 2017-12-13T16:56:47.120 回答