Although I can easily use the <img> tag, I encounter a problem when attempting to utilize the <Image> component. Instead of the image displaying as intended, all that shows is an empty square of the same size. To showcase the image without resorting to the <img> tag, my only successful method thus far has been through the <Avatar> component. While this works for a small brand image, I would prefer to leverage Next.js's built-in image optimization and find a more semantically appropriate solution than using <Avatar>.
The image is contained within a ListItem component structured like so:
<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>
My attempts at resolving this issue include:
- Creating 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 replacing <Avatar> with <Brand /> inside the <ListItem>.
- Importing the .png file and using
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
within the <ListItem>. I also attempted to do the same without importing the image, opting instead to use the full file path.
- Placing
<Image> within the<Avatar>component.
<Avatar>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Avatar>
I experimented with incorporating the layout prop featuring various options.
Currently, I am employing Next.js v12.0.9 and MUI v5.4.2