-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?

Tejogol
  • 670
  • 8
  • 24
rahul-g
  • 1
  • 1

2 Answers2

5

Both, <CardMedia> and <Img> are wrappers themselves. The first one accepts children as a prop (as shown in their documentation) and <Img> from Gatsby-image is a container with its own features (responsive sizes, lazy loading, etc), not an image itself.

You can easily fix it by wrapping the <Img> with the <CardMedia>:

<Card>
  <CardHeader title={title}/>
  <CardMedia> 
    <Img fixed={image.localFile.childImageSharp.fixed} />
  </CardMedia>
</Card>
Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
0

Gatsby image isn't here just for getting source of the image, it has its own features which requires that it has its own container.

On the other hand CardMedia is dedicated container for showing image from source.

To fix your issue simply mimic behaviour of CardMedia component. This is simple container just holding image anyway.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Mario Nikolaus
  • 2,346
  • 1
  • 21
  • 28