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

我试图从内容丰富的数据中获取图像到盖茨比网站。我可以检索文本内容

我浏览了盖茨比图像插件文档。看起来不错

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”

---

当您获得null error的read属性时，这意味着父属性为null。可能某个节点没有任何图像属性，因此当您尝试读取null的流体时，会出现错误。

---

在使用贴图函数达到流体属性之前，请尝试检查贴图函数中节点中是否存在图像

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

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

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

---

看看这个问题-我也有同样的问题，因为上传图像的原始文件名包含一个点和一个问号。将一个名称合适的文件上传到Contentful就成功了。