将Gatsby-Image与Material-ui CardMedia组件一起使用时出现问题

Question

Material-ui的Card组件可以具有CardMedia组件，作为子代，它可以接受图像源作为道具。另一方面，盖茨比图像则需要自己的道具（固定或流体）作为来源。

<Card>
  <CardHeader title={title}/>
  <CardMedia src={image.localFile.childImageSharp.fixed} component={Img} /> 
</Card>

此问题是否有解决方法？

Answer 1

<CardMedia>和<Img>本身都是包装器。第一个将children接受为prop（如their documentation所示），而来自Gatsby-image的<Img>是一个具有自身功能（响应大小，延迟加载，等），而不是图像本身。

您可以通过用<Img>包装<CardMedia>来轻松地绕过它：

<Card>
  <CardHeader title={title}/>
  <CardMedia> 
    <Img fixed={image.localFile.childImageSharp.fixed} />
  </CardMedia>
</Card>

Answer 2

Gatsby图像不仅用于获取图像来源，它还具有自己的功能，这要求它具有自己的容器。

另一方面，CardMedia是专用容器，用于显示源图像。

要解决您的问题，只需模拟CardMedia组件的行为即可。这是一个简单的容器，只不过仍然保存图像。