Next.js共享布局中图片路径跨页面失效问题求助

核心原因 #

你使用的相对路径"assets/logo.svg"是基于当前页面URL解析的：首页路径为/时，会正确指向/assets/logo.svg（对应public文件夹下的assets/logo.svg）；但进入/posts页面后，相对路径会被解析为/posts/assets/logo.svg，自然找不到目标文件。

直接解决方案 #

给图片路径加上开头的斜杠，让它始终相对于域名根目录（也就是public文件夹的根）：

1. 普通img标签场景 #

// 布局组件中的导航栏图片代码
<img src="/assets/logo.svg" alt="网站Logo" />

2. Next.js Image组件场景 #

如果用的是next/image组件，同样给src加开头斜杠：

import Image from 'next/image';

// 布局组件中的图片代码
<Image
  src="/assets/logo.svg"
  alt="网站Logo"
  width={80}
  height={40}
/>

额外说明 #

• public文件夹是Next.js的静态资源根目录，所有放在这里的文件都可以通过/文件名或/子文件夹/文件名的绝对路径直接访问，无需额外配置next.config.js（除非是外部域名的图片）。
• 之前调整next.config.js没解决问题，大概率是因为没修正路径写法，核心还是要确保路径为根相对路径（开头带斜杠）。

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