如何将Next.js Image组件与MaterialUI一起使用?

Question

我可以毫无问题地使用<img>标签，但是当我尝试使用<Image>组件时，显示的只是一个图像大小的空正方形。我能够在不使用<img>的情况下显示图像的唯一方法是使用<Avatar>组件。这只是一个小品牌形象，所以没什么大不了的，但我想使用内置的Next.js图像优化。使用<Avatar>也感觉不是很语义。

它显示在列表项组件中，如下所示：

<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>

这是我到目前为止尝试过的：

1. 我为图像创建了一个单独的组件

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" />
}

并在<ListItem>内部显示<Brand />，以代替当前<Avatar>组件。

2. 我尝试导入.png文件并使用

<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />

<ListItem>里面.然后我尝试不导入图像，只使用完整的文件路径。

3. 我尝试将<Image>放在<Avatar>组件内。

<Avatar>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Avatar>

我还尝试添加包含所有选项的layout道具。

我正在使用下一步.js v12.0.9 和 MUI v5.4.2

Answer 1

这似乎对我有用。

<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>

使用 Stack 似乎可以在不使用宽度的情况下扩展图像的全宽：100%

Answer 2

我建议创建一个具有位置响应的父元素，并像这样设置图像：

<Box sx={{position:'relative'}}>
<Image src={brandImage} width="50px" height="50px" alt="Brand Logo" />
</Box>

您也可以将其设置为：

<Box sx={{position:'relative', height:'50px', width:'50px'}}>
<Image src={brandImage} layout="fill" objectFit="cover" alt="Brand Logo" />
</Box>