Next.js v15中使用fill属性时图片不显示的解决方法咨询

可能的原因及对应解决方案 #

1. 父容器缺少明确高度 #

使用fill属性时，Image组件会填充父容器空间，但如果父容器仅设置了宽度（w-full）而无明确高度，容器高度会被计算为0，导致图片无法渲染。

解决方法：给父容器设置固定高度或比例：

• 固定高度：添加h-[400px]（数值按需调整）
• 比例自适应：使用aspect-ratio类，比如aspect-square或aspect-[4/3]

修改后代码示例：

<div className="relative mb-2 w-full h-[400px] flex justify-center items-center">
    <Image src={`http://localhost:1337${image}`} alt="product-image" fill className="object-cover" /> 
</div>

2. 未配置远程图片域名权限 #

Next.js v15的Image组件默认限制外部域名图片加载，需在next.config.js中配置remotePatterns允许localhost:1337的资源。

解决方法：在项目根目录next.config.js中添加配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '1337',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

3. 未设置图片适配样式 #

使用fill时，图片默认可能因拉伸/压缩导致显示异常，添加object-fit样式可确保图片正确填充容器。

解决方法：给Image组件添加适配类：

<Image 
  src={`http://localhost:1337${image}`} 
  alt="product-image" 
  fill 
  className="object-cover" 
/>

（可选object-contain/object-fill等，根据需求选择）

4. 检查Image组件导入路径 #

确保导入的是App Router版本的Image组件，Next.js v15中App Router为默认推荐，路径错误会导致属性不兼容。

正确导入：

import Image from 'next/image';

内容的提问来源于stack exchange，提问作者No Date