Next.js Image组件fill属性失效，图片无法显示求助

核心问题：父容器类名语法错误 #

你代码中包裹Image组件的<div>存在Tailwind类名拼写错误：min-w -[64px]应该是min-w-[64px]——多了一个空格导致min-w-[64px]这个类没有生效，父容器的最小宽度变为默认的0值左右。

为什么fill属性失效？ #

Next.js的Image组件使用fill属性时，完全依赖父容器的尺寸来填充空间。当父容器没有有效宽度/高度时，图片没有可填充的空间，自然无法渲染。

为什么width/height能正常显示？ #

当你给Image显式设置width和height时，组件会直接使用这两个固定尺寸渲染图片，不需要依赖父容器的尺寸，因此能正常显示。

修正后的代码 #

return (
    <button className="relative group flex items-center rounded-md overflow-hidden gap-x-4 bg-neutral-100/10 hover:bg-neutral-100/20 pr-4 transition">
        <div className="relative min-h-[64px] min-w-[64px]">
            <Image className="object-cover" fill src={image} alt="Image" />
        </div>
        <p>
            {name}
        </p>
    </button>
);

内容的提问来源于stack exchange，提问作者Jelo Vlagst