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

如何解决盖茨比图片未显示在图库中

我正在尝试在图库页面上显示图像，但不显示图像。我遵循了这个@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`
      },