Vercel部署应用多路由层级下图片路径解析失败求助

AI 小北

2026-7-12

问题原因及解决方案

原因分析

你遇到的问题是相对路径的解析逻辑导致的：

浏览器解析./开头的相对路径时，是基于当前页面的URL路径，而非项目文件系统的结构。
当访问baseURL/randomthing时，当前URL的路径层级是一级，./plug-in.png会被解析为baseURL/plug-in.png，正好匹配图片的实际位置，所以能正常显示。
当访问baseURL/randomthing/anotherrandomthing时，当前URL的路径层级是二级，./plug-in.png会被解析为baseURL/randomthing/plug-in.png，这个路径下不存在对应的图片，所以加载失败；而../plug-in.png会回退一级，解析为baseURL/plug-in.png，因此能正常显示。

推荐以下几种可靠的解决方式：

使用根路径绝对引用：如果图片放在项目的public目录下，直接用/plug-in.png作为src值，这样无论当前路由层级如何，浏览器都会从网站根目录查找图片。
```
<img src="/plug-in.png" style={imageStyle} />
```
ES模块导入图片：在React项目中，通过import方式导入图片资源，webpack会自动处理图片的路径，生成正确的资源URL，不受路由影响。
```
import pluginImg from './plug-in.png';
// ...
<img src={pluginImg} style={imageStyle} />
```
使用PUBLIC_URL适配非根部署：如果你的应用部署在非根路径下，可以用process.env.PUBLIC_URL拼接路径，确保路径正确。
```
<img src={`${process.env.PUBLIC_URL}/plug-in.png`} style={imageStyle} />
```