• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pobieranie wszystkich obrazów z folderu publicznego po zbudowaniu aplikacji [React + Vite]

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
262 wizyt
pytanie zadane 19 lipca 2023 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)

Chciałbym zrobić galerię zdjęć na stronie, ale nie chcę przechowywać plików na zewnętrznym serwerze, więc moim pomysłem jest przechowywanie wszystkich obrazów w folderze publicznym projektu. Głównym założeniem jest możliwość dodawania kolejnych plików do listy po zbudowaniu aplikacji. Korzystam z frameworka React+Vite.

Pobrałem wszystkie pliki z folderu `public/gallery`. `import.meta.glob` zwraca funkcje, które zwracają Promise. Dlatego wywołałem każdą funkcję i z promisów uzyskałem adresy URL plików.

interface ImportImageData {
  default: string
}

type ImportImageGlob = () => Promise<ImportImageData>
useEffect(() => {
    const fetchGallery = (): void => {
      const images: ImportImageGlob[] = Object.values(
        import.meta.glob('/public/gallery/*')
      ) as ImportImageGlob[]

      _.forEach(images, (fetchImg: ImportImageGlob): void => {
        fetchImg()
          .then((data: ImportImageData): void => {
            setDataSource((prev: string[]): string[] => {
              return _.uniq([...prev, data.default])
            })
          })
          .catch((): void => {})
      })
    }

    fetchGallery()
  }, [setDataSource])

W wersji developerskiej aplikacji wszystko działa idealnie. Jednak w wersji produkcyjnej lista plików nie jest odświeżana, tzn. kiedy dodaję nowy obraz, wyświetlane są tylko poprzednie pliki.

Jak mogę rozwiązać ten problem? Czy jest jakieś inne rozwiązanie na ten problem?

Z góry dziękuję

1 odpowiedź

+3 głosów
odpowiedź 19 lipca 2023 przez jankustosz1 Nałogowiec (36,800 p.)
wybrane 20 lipca 2023 przez Oskar Szkurłat
 
Najlepsza
Cały kod js jest wykonywany po stronie przeglądarki klienta. Zastanów się skąd miałby on wiedzieć, że gdzieś na serwerze dodałeś sobie jakiś plik? Do tego pewnie hostujesz stronę statycznie na jakimś nginxie lub apatchu, więc nie masz możliwości przesłać informacji o plikach w tym katalogu.

Potrzebujesz odpalić prosty serwer rest np. w express, który jedyne co będzie robił to będzie odpowiadał na zapytanie do niego mówiąc jakie pliki znajdują się w tym katalogu. Wtedy będziesz mógł sobie we frontendzie wysłać do niego request i dowiedzieć się jakie pliki będą istnieć w katalogu /public/gallery.

Co do import.meta.glob to wygląda na to, że w czasie builda, vite patrzy jakie są pliki w tym katalogu i gdzieś zapisuje ich nazwy w wynikowym bundlu.
komentarz 20 lipca 2023 przez Oskar Szkurłat Bywalec (2,780 p.)
To co piszesz jest w pełni zrozumiałe :). Niestety w tym przypadku dostałem właśnie tylko dostęp do przestrzeni dyskowej. Gdyby nie to, napisałbym API i przechowywał ilustracje w DB. Bo tak chyba się powinno w takich przypadkach?
1
komentarz 20 lipca 2023 przez jankustosz1 Nałogowiec (36,800 p.)
To jedyne co mogę zaproponować to żebyś zrobił sobie jakiś plik tekstowy z listą nazw tych plików i przy dodawaniu kolejnych obrazów ten plik aktualizował. A frontend pierwsze co zrobi to pobierze sobie ten plik i zobaczy jakie obrazy są dostępne.

Ewentualnie możesz np. nazywać ten obraz 1.jpg, 2.jpg itd. wtedy frontend mógłby próbować pobrać kolejne numery aż nie dojdzie do 404.
komentarz 20 lipca 2023 przez Oskar Szkurłat Bywalec (2,780 p.)
Dosłownie zacząłem tak robić :)

No cóż to dziękuję bardzo za wyjaśnienie i rady

Podobne pytania

0 głosów
1 odpowiedź 224 wizyt
pytanie zadane 26 grudnia 2020 w JavaScript przez sKodowany Obywatel (1,150 p.)
0 głosów
1 odpowiedź 255 wizyt
pytanie zadane 30 kwietnia 2019 w JavaScript przez Hasira Bywalec (2,100 p.)
0 głosów
0 odpowiedzi 231 wizyt

93,188 zapytań

142,204 odpowiedzi

322,027 komentarzy

62,515 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2581p. - dia-Chann
  2. 2537p. - Łukasz Piwowar
  3. 2528p. - Łukasz Eckert
  4. 2514p. - CC PL
  5. 2476p. - Tomasz Bielak
  6. 2445p. - Łukasz Siedlecki
  7. 2443p. - rucin93
  8. 2418p. - Michal Drewniak
  9. 2373p. - Marcin Putra
  10. 2367p. - Adrian Wieprzkowicz
  11. 2317p. - Mikbac
  12. 2156p. - Anonim 3619784
  13. 2016p. - Michał Telesz
  14. 1733p. - rafalszastok
  15. 1628p. - Dominik Łempicki (kapitan)
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...