Vite+React部署GitHub Pages时图片相对路径问题求助

问题原因 #

你已经在vite.config.js中设置了base: '/car-plates/'，这意味着部署后所有资源的基础路径是maciejkrolpl.github.io/car-plates/。但代码中使用的是绝对路径/flags/${filename}.svg，会直接指向域名根目录下的flags文件夹，而非子路径里的对应目录，导致路径不匹配。

解决方案 #

方法1：使用Vite内置环境变量拼接路径（推荐） #

修改图片引用代码，用Vite自动注入的import.meta.env.BASE_URL环境变量拼接路径——这个变量的值就是你在vite.config.js中设置的base参数，会自动适配本地和部署环境：

<img src={`${import.meta.env.BASE_URL}flags/${filename}.svg`} alt="Flag" />

本地开发时BASE_URL为/，路径变为/flags/xxx.svg；部署后BASE_URL为/car-plates/，路径自动变为/car-plates/flags/xxx.svg，完美匹配实际文件位置。

方法2：改用相对路径（仅适用于无多级路由场景） #

如果你的应用没有多级路由（比如始终在根路径下），可以把绝对路径改成相对路径：

<img src={`./flags/${filename}.svg`} alt="Flag" />

注意：当页面路由为多级路径（如/car-plates/detail）时，相对路径会变成/car-plates/detail/flags/xxx.svg，导致图片加载失败，因此不推荐这种方法。

验证配置 #

你的vite.config.js中的base配置无需修改，保持当前设置即可：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/car-plates/',
})

内容的提问来源于stack exchange，提问作者Maciej Król