时间戳

首页 > 解决方案 > TypeError：无法读取 null 的属性“流体”

javascript - TypeError：无法读取 null 的属性“流体”

问题描述

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

我浏览了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 的属性“流体”。

标签： javascriptgatsbycontentful

解决方案

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

推荐阅读