How to use Next.js Image component with MaterialUI? - reactjs

Question

I am able to use the <img> tag no problem, but when I try to use the <Image> component, all that displays is an empty square the size of the image. The only way I have been able to get the image to display without using <img> is with the <Avatar> component. It's just a small brand image so it's not a huge deal, but I would like to use the built-in Next.js image optimization. And using <Avatar> does not feel very semantic as well.
It is being displayed inside of a ListItem component like this:
<Drawer variant="permanent" {...other}>
<List disablePadding>
<ListItem
sx={{
justifyContent: 'center',
alignItems: 'center',
}}
>
<Avatar
src="images/icons/agreement2.png"
alt="Scales of Justice Brand Image"
sx={{ width: 50, height: 50 }}
/>
</ListItem>
This is what I have tried so far:
I created a separate component for the image
import Image from 'next/image'
import brandImage from '../public/images/icons/law.png'
export default function Brand() {
return <Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
}
and displaying <Brand /> inside of the <ListItem> in place of the current <Avatar> component.
I tried to import the .png file and use
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
inside of the <ListItem>. And then I tried without importing the image and just using the full file path.
I tried placing <Image> inside of the <Avatar> component.
<Avatar>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Avatar>
I also tried adding in the layout prop with all of the options.
I am using Next.js v12.0.9 and MUI v5.4.2

Answer 1

I recommend creating a parent element with a position responsive and setting the image like this:
<Box sx={{position:'relative'}}>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Box>
You also may set it like:
<Box sx={{position:'relative', height:'50px', width:'50px'}}>
<Image src={brandImage} layout="fill" objectFit="cover" alt="Brand Logo" />
</Box>

Answer 2

This seem to work for me.
<Stack
sx={{
height: "500px",
}}
>
<Image
src={image.data.attributes.url}
alt={image.data.attributes.alternativeText}
width={image.data.attributes.width}
height={image.data.attributes.height}
objectFit="cover"
priority
/>
</Stack>
Using Stack seems to expand the image full width without using width: 100%