Ścieżki do obrazów po wdrożeniu ma nieodpowiedni base path

Mam problem ze zdeplojowaniem mojej aplikacji Vite+React na GitHub Pages. Mam folder o nazwie flags/ wewnątrz katalogu public/, który znajduje się w roocie mojego projektu, na tym samym poziomie co katalog src/.

Dynamicznie ładuję obrazy przy użyciu

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

i działa na localhoście

Po zdeplojowaniu na GitHub Pages obrazy znajdują się pod następującym adresem URL: maciejkrolpl.github.io/car-plates/flags/poland.svg i jest ok. Problem polega na tym, że w moim kodzie pojawiają się ścieżki maciejkrolpl.github.io/flags/poland.svg.

Oto mój vite.config.js:

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

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

Czy ktoś ja jakiś pomysł jak to rozwiązać?

Heh nawet nie wiedziałem że folder public jest dozwolony. Myślałem że musi być w assets

A na temat. github skleja tak twoje linki bo dokleja nazwę repo.
Jak nie chcesz żeby doklejał nazwy repo to musisz zmienić na specjalną którą jest w twoim przypadku maciejkrolpl.github.io
Ale pewnie lepiej zaakceptować zmiany jakie robi github zdalnie i przerobić konfig jekylla tak żeby działał też lokalnie.
Bo używasz lokalnie jekylla prawda?

Nie używam jekylla, używam gh-pages

macie3k napisał(a):

Nie używam jekylla, używam gh-pages

A lokalnie?

Pytam bo gh-pages to okrojony jekyll i jak chcesz dokładnie takie same zachowanie lokalnie i zdalnie to potrzebujesz jekylla lokalnie. Albo dużo rzeźby, co kto woli

A lokalnie?

Pytasz jak buduję apkę? vite

macie3k napisał(a):

Po zdeplojowaniu na GitHub Pages obrazy znajdują się pod następującym adresem URL: maciejkrolpl.github.io/car-plates/flags/poland.svg i jest ok.

Aplikacja działa tak jak powinna.

obrazy znajdują się pod następującym adresem URL: `maciejkrolpl.github.io/car-plates/flags/poland.svg` i jest ok.. No właśnie nie okej, bo nie powinny być dostępne pod tym URL'em.

macie3k napisał(a):

Problem polega na tym, że w moim kodzie pojawiają się ścieżki maciejkrolpl.github.io/flags/poland.svg.

No pojawiają się takie, bo dokładnie taki adres wpisałeś w swoim <img/>.

Masz trzy wyjścia:

• Najlepsze: zmień ustawienia Github Pages, tak żeby serwowały content z /. Tak, żeby Twoja apka była serwowana pod maciejkrolpl.github.io/ a obrazki były pod maciejkrolpl.github.io/flags/poland.svg
• Mniej dobre, serwuj treści z base pathem. Jest to gorsze, bo Twoja aplikacja musi znać ten początek URI skądś, więc jest to dodatkowa rzecz do konfiguracji. Jeśli się zdecydujesz na to rozwiązanie, to możesz to zrobić na dwa sposoby:
  • Dodać zmienną base w której będziesz trzymał wartość car-plates, i doklej ją do url'a obrazka
  • Dodać tag <base> w widoku HTML, w której zahardcodzisz adres car-plates/, wtedy nawet jak <img> będzie miał względną ścieżkę, to trafi na odpowiedzni URI.

• Najlepsze: zmień ustawienia Github Pages, tak żeby serwowały content z /. Tak, żeby Twoja apka była serwowana pod maciejkrolpl.github.io/ a obrazki były pod maciejkrolpl.github.io/flags/poland.svg

To odpada, bo ma być dostępna pod .../car-plates

• Mniej dobre, serwuj treści z base pathem. Jest to gorsze, bo Twoja aplikacja musi znać ten początek URI skądś, więc jest to dodatkowa rzecz do konfiguracji.

Pokombinuję z tym, dzięki.

https://stackoverflow.com/a/72090801/9339427
Skorzystałem z tego rozwiązania i działa