Question

我正在尝试将图像从内容数据获取到盖茨比站点。我可以检索文本内容。

我浏览了gatsby-image插件文档。看起来不错。

const getBlogList = graphql`
{
  blogs: allContentfulBlog {
    edges {
      node {
        id
        title
        image {
          fluid(maxWidth:250) {
            ...GatsbyContentfulFluid_tracedSVG
          }        
        }
      }
    }
  }
}
`;

<StaticQuery 
      query={getBlogList} 
      render={ data => {
      return({data.blogs.edges.map(({node})=>{
      return(<div><Img fluid={node.image.fluid} /></div>)
          }) 
        }
       )
      }} />

我找不到哪里出了问题。我遇到了错误

TypeError：无法读取null的属性“ fluid”。

Answer 1

当您获得null错误的read属性时，这意味着父属性为null。也许某个节点没有任何图像属性，所以当您尝试读取null的流体时，您会收到错误消息。在使用它达到流体属性之前，请尝试检查地图功能上节点中是否存在图像。

Answer 2

您可以在JSX中尝试此操作以检查值的存在：

{node.image && (         //Check with console.log what value node.image?
   <div><Img fluid={node.image.fluid} />  //renders if value present
)}

Answer 3

Mehdi是对的。我遇到了同样的问题，但是当我意识到我忘了从Contentful仪表板放置图像并从那里设置所有图像时，问题就解决了。该错误试图告诉您尚未设置Contentful仪表板中的所有图像。这就是为什么parent属性为null的原因。

TypeError：无法读取null的属性“ fluid”

3 个答案: