Reactjs 内容丰富的CMS中的资产图像到达我的盖茨比/React应用程序，但浏览器错误显示它们是；空"；

编辑：我添加了循环代码

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

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

这个CardMedia组件具有映射功能，但其中的JS不会是问题所在，因为除了图像之外，其他一切都可以正常工作。

const posts=get（这是'props.data.allcontentfulbog.edges'）
{posts.map（{node}）=>{
返回(
{node.maintTitle}

阅读更多
)
})}

据我对您的GQL应用程序的了解，这将是您的Edge阵列的关键，我猜想您将其用作

帖子

。

const posts=allContentfulBlog.edges

或者可能

const posts=this.props.allcontentfulbog.edges

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

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

如果您已经有了这个功能，请为您正在执行此循环的组件提供一个代码快照

---

更新：

查看结果图像，其中一个节点似乎没有

mainImg

。因此，在这种情况下，我们将使用默认的图像链接

在

render（）方法中添加以下内容：

constdefaultimage=
linktoyourfaultimage

在您的循环中：

{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>
  )
})}

{posts.map（{node}）=>{
返回(
……代码的其余部分。。。。。。。。。。。。。
)
})}

对
CardMedia
组件进行了更改，在
image
prop中，我们检查了
node.mainImg
的值是否为空，并返回正确的值，如
！无效的image:defaultImage
是的，我就是这么做的；我已经添加了循环。请检查答案中的更新@谢谢你！这就是发生的事情，我忘了在博客里放一个维护资源。太棒了！我猜是有压力的一课：D
{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>
  )
})}