来自Contentful CMS的资产图片到达了我的Gatsby / React应用，但浏览器错误表明它们为“空”

Question

编辑：我添加了循环代码。

其他变量工作正常，因此Contentful和我的应用程序的数据层之间的连接不是问题。

我可以在GraphiQL工具中看到图像资产变量，包括它的src，但是在我的代码中它似乎为空。我理解GraphiQL的方式是，它查询本地数据层，因此变量来自Contentful就好了。这是我使用的简化查询。

此CardMedia组件位于映射功能中，但是其中的JS不会成为问题，因为除图像之外，其他所有功能都可以正常工作。

const posts = get(this, 'props.data.allContentfulBlog.edges')

{posts.map(({ node }) => {
  return (
    <Grid key={node.slug}>                
      <Card>                    
        <CardMedia
          image={node.mainImg.responsiveResolution.src}
          title={node.mainTitle}
        />                
        <CardContent>                        
          <Typography variant="headline" component="div">
            {node.mainTitle}
          </Typography>                        
          <Typography component="div">
            <p
              dangerouslySetInnerHTML={{
                __html: node.mainText.childMarkdownRemark.excerpt,
              }}
            />
          </Typography>
        </CardContent>
        <CardActions>
         <Button href={node.slug}>
           <span>Read more</span>
         </Button>
        </CardActions>            
      </Card>
    </Grid>
  )
})}

Answer 1

从我的理解到您的GQL应用，这将是您的edges数组的关键，我假设您将其用作posts。 const posts = allContentfulBlog.edges 或const posts = this.props.allContentfulBlog.edges

因此： 我们将使用它在posts数组内的对象上循环。

posts.map((post) => {
  return /* Grid */
})

如果已经有了此代码，能否请您为执行此循环的组件提供代码快照。

---

已更新：

查看结果图像，似乎其中一个节点没有mainImg。因此，在这种情况下，我们将使用默认的图片链接。

在您的render()方法中添加以下内容：

const defaultImage = linkToYourDefaultImage ;

在您的循环中：

{posts.map(({ node }) => {
  return (
    <Grid key={node.slug}>                
      <Card>                    
        <CardMedia
          image={node.mainImg ? node.main.responsiveResolution.src : defaultImage}
          title={node.mainTitle}
        /> 
        ......the rest of your code.............               
    </Grid>
  )
})}

对CardMedia组件进行了更改，在image属性中，我们检查了node.mainImg的值是否为空，并返回了诸如{{1 }}