How to use Next JS IMAGE inside material ui card media

Question

I am using Next JS and Material UI together in my project. for Image optimization, I would like to use the Next JS Image component.

currently, my card media looks like below. I am getting the image URL row.image.url from an API call and assigning it to the image prop of the CardMedia component

 <CardMedia
 className={classes.cardMedia}
 image={row.image.url}/>

But I would like to take the advantage of the Next JS Image component for the optimization and lazy loading but couldn't able to see a way to fit this.

import Image from 'next/image'

Did anyone face this type of requirement? Appreciate your help

Thanks Venk

Papa

Answer 1

You can do it like this:

        <CardMedia className={classes.cardMedia} title="Your title">
          <div style={{ position: 'relative', width: '100%', height: '100%' }}>
            <Image src={row.image.url} layout="fill" objectFit="cover" />
          </div>
        </CardMedia>

Check this answer for more info

Serendipity

and you can use fill prop instead of layout which is depricated – Healion

Answer 2

Objectfit is now deprecated and you should use the style prop in the Image component.

style={{objectFit: "cover"}}

Belamy