盖茨比图片未显示在图库中

Question

我正在尝试在图库页面上显示图像，但不显示图像。我遵循了这个@browniebroke/gatsby-image-gallery，但是图像没有显示出来。我也有images/gallery文件夹中的图像，就像该仓库的示例一样。我对gatsby和stackbit有点困惑，因为通常我不会用它们来做网站。

这是我的画廊视图组件：

const GalleryView = ({ data }) => {
  console.log(data)
  const images = data.images.edges.map(({ node }) => ({
    ...node.childImageSharp,
    // Use original name as caption.
    // The `originalName` is queried inside the `thumb` field,
    // but the `Gallery` component expects `caption` at the top level.
    caption: node.childImageSharp.thumb.originalName,
  }))
  console.log('img:', images)
  console.log(node)
  // Override some of Lightbox options to localise labels in French
 
  return (
    <Layout>
      <h1>Gatsby image gallery demo</h1>
      <p>A very simple page to demo the gallery component.</p>
      <Gallery images={images} />
    </Layout>
  )
}

export const query = graphql`
  query ImagesForGallery {
    images: allFile(
      filter: { relativeDirectory: { eq: "images" } }
      sort: { fields: name }
    ) {
      edges {
        node {
          childImageSharp {
            thumb: fluid(maxWidth: 270, maxHeight: 270) {
              ...GatsbyImageSharpFluid
              originalName
            }
            full: fluid(maxWidth: 1024) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

export default GalleryView

这是图库组件：

const Gallery = ({
  images = null,
  thumbs = null,
  fullImages = null,
  colWidth = 100 / 3,
  mdColWidth = 100 / 4,
  gutter = '0.25rem',
  imgClass = '',
  lightboxOptions = {},
}) => {
  let thumbsArray, fullArray, thumbAltArray
  if (thumbs === null && fullImages === null) {
    // New style with all images in one prop
    thumbsArray = images.map(({ thumb }) => thumb)
    fullArray = images.map(({ full }) => full.src)
    thumbAltArray = images.map(({ thumbAlt }) => thumbAlt)
  } else {
    // Compat with old props
    thumbsArray = thumbs
    if (fullImages === null && images !== null) {
      console.warn(
        `Using the images props with thumbs is deprecated and will not 
        be supported in the next major version. 
        
        If you need to pass 2 arrays separately, use the new prop "fullImages" 
        instead, which works exactly the same way as "images" used to. 
        
        It's recommended to pass all images as a single array in the "images"
        prop instead.`
      )
      fullArray = images
    } else {
      fullArray = fullImages
    }
  }

  const [index, setIndex] = useState(0)
  const [isOpen, setIsOpen] = useState(false)

  const prevIndex = index - (1 % fullArray.length)
  const nextIndex = (index + fullArray.length + 1) % fullArray.length

  return (
    <React.Fragment>
      <Row>
        {thumbsArray.map((thumbnail, thumbIndex) => {
          return (
            <Col
              width={colWidth}
              md={mdColWidth}
              key={thumbIndex}
              onClick={() => {
                setIsOpen(true)
                setIndex(thumbIndex)
              }}
            >
              <ImgWrapper margin={gutter}>
                <Img
                  fluid={thumbnail}
                  className={imgClass}
                  alt={
                    thumbAltArray
                      ? thumbAltArray[thumbIndex]
                        ? thumbAltArray[thumbIndex]
                        : ''
                      : ''
                  }
                />
              </ImgWrapper>
            </Col>
          )
        })}
      </Row>
      {isOpen && (
        <Lightbox
          mainSrc={fullArray[index]}
          nextSrc={fullArray[nextIndex]}
          prevSrc={fullArray[prevIndex]}
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() => setIndex(prevIndex)}
          onMoveNextRequest={() => setIndex(nextIndex)}
          imageTitle={images[index].title}
          imageCaption={images[index].caption}
          {...lightboxOptions}
        />
      )}
    </React.Fragment>
  )
}

export default Gallery

Gallery.propTypes = {
  images: PropTypes.arrayOf(
    PropTypes.shape({
      full: PropTypes.object,
      thumb: PropTypes.object,
      thumbAlt: PropTypes.string,
      title: PropTypes.node,
      caption: PropTypes.node,
    })
  ),
  thumbs: PropTypes.array,
  fullImages: PropTypes.array,
  colWidth: PropTypes.number,
  mdColWidth: PropTypes.number,
  gutter: PropTypes.string,
  imgClass: PropTypes.string,
  lightboxOptions: PropTypes.object,
}

这是gatsby配置：

{
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: path.join(__dirname, `src`, `images`),
    },
  },
{
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `pages`,
        path: `${__dirname}/src/pages`
      },
},