通过 graphql 在 react-carousel 中加载的 gatsby-sharp 图像未激活

Question

我创建了一个 react-bootstrap 轮播，其中包含我通过 graphql 和 gatsby-image-sharp 加载的一些图像（源图像在 directus 中）。

我看到图像是在代码中创建的，但它们从未被分配到“活动”class。当我将图像放在旋转木马之外时，它们正确地显示在另一个下方，因此检索似乎工作正常。

如果我在 graphql 图像之后 and/or 之前手动添加一个项目，这些幻灯片就会正确显示。

我还看到，如果我在 graphql 之前和之后放一张幻灯片，则会显示第一个“正常”幻灯片，并且当交易开始时，我会得到一个与之前生成的幻灯片数量相对应的延迟再次显示下一张静态创建的幻灯片。

使用 React 开发工具检查站点时，我看到工作幻灯片的交易密钥为“.0”和“.2”，而它们之间的非工作幻灯片的交易密钥为“.1” :0:0", ".1:0:1", 等等...:[=13=]

React devtools tree

我用来生成它的代码包含在下面：

import React from "react"
import { Row, Col, Container, Carousel } from "react-bootstrap"
import { graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import Img from "gatsby-image"

const IndexPage = ({ data }) => (
  <Layout pageInfo={{ pageName: `index` }}>
    <SEO title="Home" keywords={[`gatsby`, `react`, `bootstrap`]} />
    <Container className="text-center">
      <Row>
        <Col>
          <Carousel>
            <Carousel.Item>
              <div className="d-block w-100 gatsby-image-wrapper">
              <h1>test</h1>
              </div>
            </Carousel.Item>
            {data.allDirectusSlideshow.edges.map((slideShow) => {
              return slideShow.node.images.map((image) => {
                const sharp = data.allImageSharp.edges.find((imageSharp) => (
                  imageSharp.node.fluid.originalName === image.filename_disk))
                return <>
                  <Carousel.Item key={sharp.node.id}>
                    <h1>Image</h1>
                    <Img fluid={sharp.node.fluid} className="d-block w-100" />
                  </Carousel.Item>
                </>
              })
            })}
            <Carousel.Item>
              <h1>Test 2</h1>
            </Carousel.Item>
          </Carousel>
        </Col>
      </Row>
    </Container>
  </Layout>
)

export const query = graphql`
    query {
      allDirectusSlideshow(filter: {title: {eq: "Voorpagina"}}) {
        edges {
          node {
            title
            images {
              filename_disk
            }
          }
        }
      }
      allImageSharp {
        edges {
          node {
            id
            fluid {
              originalName
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  `
export default IndexPage

由于本网站的指导api不是public，我已经提供了一个生成的代码示例here（注意：只有主页有效）

Answer 1

显然，bootstrap 轮播期望它的项目是轮播的直接子项。这意味着反应片段在这里不起作用。

改变这个：

  return <>
              <Carousel.Item key={sharp.node.id}>
                <h1>Image</h1>
                <Img fluid={sharp.node.fluid} className="d-block w-100" />
              </Carousel.Item>
            </>

至此解决问题：

  return (
                  <Carousel.Item key={sharp.node.id}>
                    <h1>Image</h1>
                    <Img fluid={sharp.node.fluid} className="d-block w-100" />
                  </Carousel.Item>
                )

通过 graphql 在 react-carousel 中加载的 gatsby-sharp 图像未激活

gatsby-sharp images loaded via graphql in react-carousel not activated

carousel

react-bootstrap

graphql

gatsby

gatsby-image