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

Question

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

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

这个问题有什么解决方法吗？

Answer 1

两者<CardMedia>都是<Img>包装器。第一个接受childrena prop（如其文档中所示）并且<Img>来自 Gatsby-image 是一个具有自己的功能（响应大小、延迟加载等）的容器，而不是图像本身。

<Img>您可以通过用以下内容轻松修复它<CardMedia>：

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