...GatsbySanityImageFluid - 无法读取 null 的属性“流体”

Posted 2023-03-08

【中文标题】...GatsbySanityImageFluid - 无法读取 null 的属性“流体”

【英文标题】：...GatsbySanityImageFluid - Cannot read property 'fluid' of null

【发布时间】：2021-04-29 22:12:45

【问题描述】：

我正在与理智和盖茨比合作

我正在尝试映射一组图像以在图像库中显示它们。我的 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>

【参考方案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>

【讨论】：

现在它给了我错误：TypeError: Cannot read property 'srcSet' of null

尝试：image.asset && <Img className="grow" fluid=image.asset.srcSet key=index /> 代码不会中断，但我想知道它是否仍显示图像。也许有一个损坏的图像破坏了代码，而其余的（您提供的输出）工作