无法减小下一个/图像组件中的图像大小

Question

图像大小根本没有改变。尝试在组件中指定宽度和高度，也尝试使用className进行样式设置。

仅当使用普通标记时，图像大小才会更改。

代码：

function Header() {
const src = "https://links.papareact.com/qd3";
return (
<header>
<div>
<Image
className="w-10 h-10"
loader={() => src}
src={src}
layout="fill"
objectFit="contain"
objectPosition="left"
/>
</div>
</header>
);
}

也尝试过使用宽度和高度：

<Image
loader={() => src}
src={src}
width="100px" //also tried width={100}
height="100px" //also tried height={100}
layout="fill"
objectFit="contain"
objectPosition="left"
/>

CodeSandbox链接：https://codesandbox.io/s/cave-frmr6?file=/components/Header.js

Answer 1

在您的示例中，在沙箱中，您使用layout="fill"

这将覆盖您的大小属性以填充整个父项。删除该属性并查看您的宽度和高度选项是否被接受。

https://codesandbox.io/s/cave-forked-egtko?file=/components/Header.js