React中process.env.PUBLIC_URL在带参数路由下无法加载图片求助

核心原因 #

当路由为/product时，浏览器当前路径层级是/product，此时相对路径image.jpg会被解析为/product/image.jpg（刚好匹配你的图片实际存储位置）；但当路由变为/product/:productId（比如/product/123）时，浏览器会把相对路径image.jpg解析为/product/123/image.jpg，这个路径下不存在目标图片，因此加载失败。

即便你用了process.env.PUBLIC_URL，如果该变量为空（React项目默认部署在根路径时就是空值），拼接后得到的依然是相对路径image.jpg，还是会受当前路由层级的影响。

解决方法 #

方法1：给图片路径添加根路径斜杠 #

直接在图片名前加/，强制路径为绝对路径：

<img src={`${process.env.PUBLIC_URL}/image.jpg`} alt="商品图片" />

这样无论当前路由是什么，都会请求[PUBLIC_URL]/image.jpg（根路径部署时就是/image.jpg），彻底摆脱路由层级的干扰。

方法2：使用require或ES模块导入图片（Create React App环境） #

在组件里直接导入图片文件，Webpack会自动处理打包后的路径：

// ES模块导入
import productImage from './image.jpg';

// 或者使用require
const productImage = require('./image.jpg');

// 组件中使用
<img src={productImage} alt="商品图片" />

这种方式最稳妥，Webpack会帮你管理图片的最终路径，完全不用考虑路由问题。

方法3：配置正确的PUBLIC_URL #

如果你的项目部署在子路径下（比如/shop），在项目根目录的.env文件中添加配置：

PUBLIC_URL=/shop

这样拼接后的路径会变成/shop/image.jpg，同样是不受路由影响的绝对路径。

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