Vercel部署React应用时头部图片路径异常问题求助

• 用绝对路径引用public文件夹内的图片
  确保图片src使用根目录开头的绝对路径（如/logo.png），而非相对路径。本地开发时相对路径可能生效，但Vercel部署后静态资源根目录对应域名根，相对路径会导致资源找不到。
  正确写法示例：

  <img src="/logo.png" alt="Site Logo" />
  

• 配置React Router的basename（若部署在子路径）
  如果你的应用部署在Vercel的子路径下（如https://xxx.vercel.app/blog），需要给BrowserRouter添加basename属性，保证静态资源路径正确：

  import { BrowserRouter } from 'react-router-dom';
  
  function App() {
    return (
      <BrowserRouter basename="/blog">
        {/* 路由组件内容 */}
      </BrowserRouter>
    );
  }
  

• 清除Vercel缓存并重新构建
  进入Vercel项目的「Deployments」页面，手动触发重新构建并勾选「Skip Cache」选项，避免旧缓存资源导致加载异常。同时可通过浏览器开发者工具的「Network」面板，查看logo图片的请求状态，若返回404则说明路径配置有误，根据请求URL调整引用路径。

• 核对文件名大小写
  Vercel服务器基于Linux，区分文件名大小写，而本地Windows/macOS默认不区分。确保图片文件名（如Logo.png）和代码中的引用（如src="/logo.png"）大小写完全一致。

• 检查Link/NavLink的嵌套结构
  确保Link/NavLink仅包裹img标签，避免结构错误干扰图片路径：

  <NavLink to="/">
    <img src="/logo.png" alt="Home" />
  </NavLink>
  

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