-1

Material-ui's Card component can have a CardMedia component as a child that accepts image source as a prop. Gatsby-image on the other hand requires it's own source as a prop(fixed or fluid).

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

Is there any workaround for this issue?

4

2 回答 2

3

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

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

<Card>
  <CardHeader title={title}/>
  <CardMedia> 
    <Img fixed={image.localFile.childImageSharp.fixed} />
  </CardMedia>
</Card>
于 2020-07-21T12:39:03.257 回答
0

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

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

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

于 2020-07-21T12:14:03.877 回答