Next.js 14中Image组件不渲染仅显示alt文本的问题求助

针对你遇到的next/image组件仅显示alt文本、图片无法加载的问题，结合你的代码和Next.js 14特性，核心解决方法如下：

关键调整：添加fill属性 #

在Next.js 14的App Router中，当用相对定位的父容器包裹next/image时，必须给Image组件添加fill属性，让图片自动填充父容器尺寸。同时可移除原有的width和height参数（fill会覆盖这些值）。

修改后的代码：

import Image from "next/image";      

<div className="relative h-32 w-32 mx-auto overflow-hidden rounded-full">
  <Image
    src="/images/pp.jpg"
    alt="profile pic"
    fill
    className="object-cover object-center"
  />
</div>

额外排查点 #

• 验证图片路径：确认public/images/pp.jpg文件存在，文件名、后缀（如.jpg/.jpeg）完全匹配
• 清除缓存：重启Next.js开发服务器，同时用Ctrl+Shift+R强制刷新浏览器清除缓存
• 配置确认：本地public目录下的图片无需额外配置next.config.js，若为远程图片才需添加images.domains白名单

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