来自 Contentful CMS 的资产图像到达我的 Gatsby/React 应用程序，但浏览器错误显示它们是 "null"

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 应用程序的理解，这将是您的边缘数组的关键，我假设您将其用作 posts。 const posts = allContentfulBlog.edges 或者 const posts = this.props.allContentfulBlog.edges

因此：我们将使用它来循环 posts 数组中的对象。

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

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

更新：

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

在您的 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的值是否为null，以及return是否正确像 !null ? image : defaultImage

这样的值

来自 Contentful CMS 的资产图像到达我的 Gatsby/React 应用程序，但浏览器错误显示它们是 "null"

Asset images from Contentful CMS reach my Gatsby/React app, but a browser error says they are "null"

reactjs

contentful

gatsby