Open
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
import Box from '@mui/material/Box';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
import Image from "next/image";
export default function TitlebarBelowMasonryImageList() {
return (
<Box sx={{ width: 500, height: 450, overflowY: 'scroll' }}>
<ImageList variant="masonry" cols={3} gap={8}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<Image
src={`${item.img}?w=248&fit=crop&auto=format`}
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
layout="fill"
/>
<ImageListItemBar position="below" title={item.author} />
</ImageListItem>
))}
</ImageList>
</Box>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
title: 'Bed',
author: 'swabdesign',
},
{
img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
title: 'Books',
author: 'Pavel Nekoranec',
},
{
img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
title: 'Sink',
author: 'Charles Deluvio',
},
{
img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
title: 'Kitchen',
author: 'Christian Mackie',
},
{
img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
title: 'Blinds',
author: 'Darren Richardson',
},
{
img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
title: 'Chairs',
author: 'Taylor Simpson',
},
{
img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
title: 'Laptop',
author: 'Ben Kolde',
},
{
img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
title: 'Doors',
author: 'Philipp Berndt',
},
{
img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
title: 'Coffee',
author: 'Jen P.',
},
{
img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
title: 'Storage',
author: 'Douglas Sheppard',
},
{
img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
title: 'Candle',
author: 'Fi Bell',
},
{
img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
title: 'Coffee table',
author: 'Hutomo Abrianto',
},
];```
### Current behavior 😯
Images are not displayed in a masonry format just because I used nextjs <Image /> instead of <img />. Images are displayed in a masonry format when I use <img />. Using <img /> is good but will have issues when I deploy so I need to use <Image />
### Expected behavior 🤔
Images needs to be displayed in the masonry format when I use the nextjs <Image />.
### Context 🔦
_No response_
### Your environment 🌎
``` System:
OS: Windows 10 10.0.19045
Binaries:
Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 112.0.5615.49
Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.44)
npmPackages:
@emotion/react: ^11.10.6 => 11.10.6
@emotion/styled: ^11.10.6 => 11.10.6
@mui/base: ^5.0.0-alpha.124 => 5.0.0-alpha.124
@mui/core-downloads-tracker: 5.11.16
@mui/icons-material: ^5.11.16 => 5.11.16
@mui/joy: ^5.0.0-alpha.74 => 5.0.0-alpha.74
@mui/lab: ^5.0.0-alpha.125 => 5.0.0-alpha.125
@mui/material: ^5.11.16 => 5.11.16
@mui/private-theming: 5.11.13
@mui/styled-engine: 5.11.16
@mui/system: ^5.11.16 => 5.11.16
@mui/types: 7.2.3
@mui/utils: ^5.11.13 => 5.11.13
@mui/x-date-pickers: ^6.0.4 => 6.0.4
@types/react: 18.0.22
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 4.9.4