React Header组件中Public目录图片仅在首页显示问题求助

嘿，这个问题确实和React Router的路由路径直接相关！我来给你拆解原因和解决办法：

问题根源 #

你在Header组件里引用Public目录图片时，大概率用了相对路径（比如 <img src="logo.png" alt="logo" />）。当路由是根路径/时，浏览器会正确请求网站根目录下的/logo.png（对应Public目录里的文件）；但当路由切换到/xxx这类非根路径时，浏览器会把相对路径拼在当前路由后面，变成/xxx/logo.png——这个路径下根本没有图片，自然就显示不出来了。

三种解决方案 #

1. 使用根绝对路径（最简单直接） #

直接把图片路径改成以/开头的绝对路径，这样不管当前路由是什么，浏览器都会从网站根目录请求图片：

<img src="/logo.png" alt="网站logo" />

注：Public目录下的文件会被直接打包到网站根目录，所以/logo.png就是指向Public/logo.png，要是图片在Public的子文件夹里，比如Public/images/logo.png，就写/images/logo.png

2. 使用process.env.PUBLIC_URL（React官方推荐） #

如果你的项目是Create React App创建的，React提供了process.env.PUBLIC_URL环境变量，它会自动指向Public目录的根路径，尤其适合部署到非根域名的场景（比如https://your-site.com/app/）：

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

这种写法能保证不管项目部署在什么路径下，图片地址都是正确的。

3. 导入图片为模块（Webpack自动处理） #

你也可以直接在组件里导入图片文件，Webpack会帮你处理路径和优化图片：

// 注意这里的路径是相对于当前Header组件文件的位置
import SiteLogo from '../../public/logo.png';

function Header() {
  return <img src={SiteLogo} alt="网站logo" />;
}

这种方式的好处是Webpack会给图片添加哈希后缀（避免缓存问题），还能自动压缩图片，不过要注意导入路径要和组件文件的位置对应。

验证方式 #

你可以打开浏览器开发者工具（按F12），切换到「Network」标签，刷新非根路由的页面，看看图片的请求URL是不是变成了当前路由的子路径——如果是，就确认是路径问题啦。

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