Question

我不确定这是否特定于React或SPFx内部的构建链，但我在动态设置div上的背景图像时遇到问题。我从API调用SharePoint收到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>
  );
};

当网址采用https://tenant.sharepoint.com/image.jpg格式时，一切都按预期工作，并在生成的HTML上正确设置背景图像。当URL的格式为https://sitename.com/GetLogo?id='RandomGUID'属性时 style="background-image: url('https://SomeImageUrl')"无法在生成的div上创建。我无法弄清楚这是否在构建链中的某处被剥离，或者React是否正确处理它。我可以直接浏览基于GUID的图像URL，它渲染得很好。

Answer 1

原来这是一个简单的单一与双引号问题。将url("${logoUrl}")切换为bundle exec fastlane distribute_to_testflight，所有内容均按预期工作。

消失的背景图像样式属性与某些URL

1 个答案: