NextJS公共图片在动态路由中失效，本地与GitHub Pages兼容问题

问题根源 #

• 动态路由页面中，相对路径会跟随当前路由层级拼接，比如在/post/123页面使用images/logo.png，实际请求路径会变成/post/123/images/logo.png，导致资源找不到
• GitHub Pages部署时，项目处于域名子路径（如https://用户名.github.io/仓库名/），直接使用根路径/images/logo.png会请求域名根目录下的资源，而非仓库子路径，因此失效

可行解决办法 #

1. 用环境变量区分基础路径 #

给本地开发和线上部署分别配置不同的基础路径，让图片路径自动适配：

• Vue项目：
  根目录新建.env.development文件：

  VUE_APP_BASE_URL=/
  

  新建.env.production文件：

  VUE_APP_BASE_URL=/你的仓库名/
  

  引用图片时拼接环境变量：

  <img :src="`${process.env.VUE_APP_BASE_URL}images/logo.png`" alt="logo">
  

• React项目（Create React App）：
  在package.json中添加homepage字段：

  "homepage": "https://你的用户名.github.io/你的仓库名/"
  

  引用图片时使用process.env.PUBLIC_URL：

  <img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="logo" />
  

2. 配合路由base属性适配 #

SPA路由的base路径同步环境变量，避免路由与资源路径冲突：

• Vue Router：

  const router = createRouter({
    history: createWebHistory(process.env.VUE_APP_BASE_URL),
    routes: [/* 你的路由配置 */]
  })
  

• React Router：

  <BrowserRouter basename={process.env.PUBLIC_URL}>
    {/* 你的路由组件 */}
  </BrowserRouter>
  

3. 静态资源放public目录的正确引用 #

如果图片放在项目的public（或static）目录下：

• Vue项目直接使用~public/images/logo.png写法，构建时会自动处理路径
• React项目直接使用/images/logo.png，配合前面的homepage配置，构建后会自动转换为正确的子路径

验证流程 #

1. 本地启动项目，检查普通页面和动态路由下的图片是否正常显示
2. 构建生产包后，用serve dist（Vue）或serve build（React）本地预览，确认路径无误
3. 部署到GitHub Pages，访问线上地址验证图片显示正常

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