如何定义背景滑块的背景以及如何修复它？答案

【问题标题】：How to define backgrounds for background slider and how to fix it?如何定义背景滑块的背景以及如何修复它？
【发布时间】：2020-09-01 11:03:54
【问题描述】：

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

源代码可以在这里找到enter link description here

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

有没有什么办法可以摆脱这个错误，或者我可以在优化方式上有一个背景滑块或旋转木马之类的东西吗？

【问题讨论】：

标签： javascript reactjs gatsby gatsby-image

【解决方案1】：

您需要将 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 组件

【讨论】：

不工作。现在它显示了：TypeError：无法读取未定义回调的属性“样式”C：/Myfiles/for_react/Gatsbyjs/src/index.js:104 101 |常量回调 = 函数（）{ 102 |常量索引 = indexRef.current; 103 | > 104 | bgWrappers[索引].style.opacity = 0; 105 | bgWrappers[(index + 1) % length].style.opacity = 1; 106 | 107 | subWrappers[index].style.opacity = 0;
我已经通过从 gatsby-bootstrap 导入 {Carousel} 来完成它，但我想尝试使用 backgroundslider。但仍然没有运气
我没有时间更深入地研究代码......也许背景滑块中有一些错误
感谢您迄今为止的努力....完成后会调查它

【解决方案2】：

如果您指定要包含的图像 (images={[]})，请确保图像名称存在于您的图像文件夹中

【讨论】：