使用某些 URL 消失的背景图像样式属性答案

【问题标题】：Disappearing Background Image Style Attribute With Certain URLs使用某些 URL 消失的背景图像样式属性
【发布时间】：2017-12-12 18:57:54
【问题描述】：

我不确定这是否特定于 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，它呈现得很好。

【问题讨论】：

标签： reactjs typescript sharepoint spfx sharepointframework

【解决方案1】：

原来这是一个简单的单引号和双引号问题。将url('${logoUrl}') 切换为url("${logoUrl}")，一切正常。

【讨论】：