...GatsbySanityImageFluid - 无法读取 null 的属性 'fluid'

Question

我正在与 Sanity 和 Gatsby 合作

我正在尝试映射一组图像以在图像库中显示它们。我的 GraphQL 查询正在运行，我能够显示单个图像，但我收到错误消息：TypeError: Cannot read property 'fluid' of null 当我尝试映射数组时。

非常感谢任何方向！

我的查询：

{
  sanityGallery {
    images {
      asset {
        fluid {
          ...GatsbySanityImageFluid
        }
      }
    }
  }
}

这个作品：

const images = data.sanityGallery.images
<Img className="grow" fluid={images[0].asset.fluid} />

这不是：

const images = data.sanityGallery.images

<div className="img-container">
  {images.map((image, index) => {
    console.log(image.asset.fluid); // <-- when adding this it logs the info in the screenshot below
    return (
      <div className="box">
        <Img className="grow" fluid={image.asset.fluid} key={index} />
      </div>
    )
  })}
</div>

Answer 1

试试这样的东西：

const images = data.sanityGallery.images

<div className="img-container">
  {images.map((image, index) => {
    console.log(image.asset); // 
    return (
      <div className="box">
        {image.asset && <Img className="grow" fluid={image.asset.srcSet} key={index} />}
      </div>
    )
  })}
</div>

...GatsbySanityImageFluid - 无法读取 null 的属性 'fluid'

...GatsbySanityImageFluid - Cannot read property 'fluid' of null

graphql

gatsby

sanity

...GatsbySanityImageFluid - 无法读取 null 的 属性 'fluid'

...GatsbySanityImageFluid - Cannot read property 'fluid' of null

graphql

gatsby

sanity

...GatsbySanityImageFluid - 无法读取 null 的属性 'fluid'