Using the new Next.js Image component with Material UI

Question

In Material UI the components that display images have a parameter for the image. eg:

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />

In Next.js v10 there is a new Image component that automatically scales images: https://nextjs.org/docs/api-reference/next/image 

Has anyone figured out how to use the new Image component with Material UI?

Answer 1

I am able to use it like this and it works well. I hope it will be helpful.

<Avatar className={className}>
  <Image src={src || placeholder} alt={alt} layout="fill" />
</Avatar>

Answer 2

import image_1 from "/static/images/avatar/1.jpg" //locate image

then just replace

src="/static/images/avatar/1.jpg"

to

src={image_1.src}