CODEWITHSUNDEEP
reactjsvitegithub-pages
Maciej Król
Maciej Król

Reputation: 11

Issue with Relative Paths for Images in Vite+React App Deployed on GitHub Pages

I'm facing a problem with deploying my Vite+React application to GitHub Pages. I have a folder named flags inside the public directory, which is at the root level of my project, on the same level as the src directory. I'm dynamically loading images using the path <img src="/flags/${filename}.svg">, and this works perfectly fine on my local development server.

However, after deploying to GitHub Pages, the images are located at the following URL: maciejkrolpl.github.io/car-plates/flags/poland.svg. This is expected, but the issue is that in my code, I am referencing the images with the path maciejkrolpl.github.io/flags/poland.svg.

Here is my vite.config.js:

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

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

I need assistance in resolving this path issue so that my application can correctly reference the images on GitHub Pages. Any help or guidance would be greatly appreciated. Thank you!

I tried changing base entry in vite.config as well as changing location of public directory, but whithout success.

Upvotes: 0

Views: 1191

Answers (1)

Maciej Kr&#243;l
Maciej Kr&#243;l

Reputation: 11

Reference: Link

I was able to solve the problem using this post. I changed my local paths with adding dot:

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

In root folder i created .env.local file with content:

PUBLIC_URL=

In github repository settings I added environment secret with name PUBLIC_URL and value car-plates

PUBLIC_URL=car-plates

Upvotes: 0

Related Questions