将 gatsby-image 与 material-ui CardMedia 组件一起使用时遇到问题答案

【问题标题】：Trouble using gatsby-image with material-ui CardMedia component将 gatsby-image 与 material-ui CardMedia 组件一起使用时遇到问题
【发布时间】：2020-07-21 12:01:18
【问题描述】：

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

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

这个问题有解决办法吗？

【问题讨论】：

标签： material-ui gatsby gatsby-image

【解决方案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>

【讨论】：

我很乐意提供帮助。请接受它作为关闭问题的答案
如果这个答案被标记为正确的答案会很棒

【解决方案2】：

Gatsby 图像在这里不仅仅是为了获取图像的来源，它有自己的特性，需要它有自己的容器。

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

要解决您的问题，只需模仿 CardMedia 组件的行为。无论如何，这是一个简单的容器，只是保存图像。

【讨论】：