时间戳

首页 > 解决方案 > 如何定义背景滑块的背景以及如何修复它？

javascript - 如何定义背景滑块的背景以及如何修复它？

问题描述

我正在尝试为餐厅制作背景滑块。出于这个原因，我使用了 gatsby-image-background-slider。当我执行“gatsby develop”时，它在执行时没有显示错误，但是当我尝试在本地主机中浏览时，它显示错误“× TypeError：无法读取未定义的属性'背景'”

源代码可以在这里找到在这里输入链接描述

我想使用轮播，但我认为使用这个插件会更好。这是我在 gatsby 的第一次尝试。我已经安装了插件并尝试了 graphql 中的查询。根据 gatsby-image-background-slider 文档，没有提到将目录提供给背景。我尝试在相对路径中输入一些内容，但它显示错误并且文档中未提及。

有什么想法我怎样才能摆脱这个错误或者我可以有一个背景滑块或旋转木马之类的优化方式吗？

标签： javascriptreactjsgatsbygatsby-image

解决方案

您需要将 BackgroundSection 组件更改为：

export default function BackgroundSection({
  img,
  styleClass,
  children,
  title,
  query // you forgot this
}) {
  return (
    <BackgroundSlider className={styleClass} fluid={img} query={query}>
      <div class="container">
        <div class="row align-items-center justify-content-center">
          <div class="col-xl-9 col-md-9 col-md-12">
            <div class="slider_text text-center bold">
              <div>
                <h1>{title}</h1>
              </div>
              <div>
                <h1>{title}</h1>
              </div>
            </div>
          </div>
        </div>
      </div>

      {children}
    </BackgroundSlider>
  )
}

您忘记包含查询并将该查询传递给 BackgroundSLider 组件

推荐阅读