部署在GitHub Pages上的Vite+React应用图片相对路径问题

Question

我在将 Vite+React 应用程序部署到 GitHub Pages 时遇到问题。我在 public 目录中有一个名为 flags 的文件夹，该文件夹位于我的项目的根级别，与 src 目录处于同一级别。我使用路径

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

动态加载图像，这在我的本地开发服务器上运行得很好。

但是，部署到 GitHub Pages 后，图像位于以下 URL：

maciejkrolpl.github.io/car-plates/flags/poland.svg

。这是预期的，但问题是在我的代码中，我使用路径

maciejkrolpl.github.io/flags/poland.svg

引用图像。

这是我的 vite.config.js：

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

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

我需要帮助来解决此路径问题，以便我的应用程序可以正确引用 GitHub Pages 上的图像。任何帮助或指导将不胜感激。谢谢！

我尝试更改 vite.config 中的

base

条目以及更改公共目录的位置，但没有成功。

Answer 1

参考：链接

我能够使用这篇文章解决问题。我通过添加点更改了本地路径：

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

在根文件夹中我创建了

.env.local

文件，内容为：

PUBLIC_URL=

在 github 存储库设置中，我添加了名称为

PUBLIC_URL

和值

car-plates

的环境密钥

PUBLIC_URL=car-plates