无法减小 next/image 组件中的图像大小

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

代码沙盒 link : 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

无法减小 next/image 组件中的图像大小

couldn't reduce the size of image in next/image component

css

reactjs

next.js

tailwind-css