javascript - Ako použiť fetch() z verejného priečinka v NextJS?

Mám nasledujúci scenár použitia. Mám webového pracovníka, v rámci ktorého potrebujem načítať obrázok, ktorý sa nachádza v priečinku public NextJS, aby som ho mohol konvertovať na blob.

Práve teraz vykonanie fetch('public/images/myImage.png'); alebo fetch('/images/myImage.png'); vedie k chybe:

Chyba: TypeError: Nepodarilo sa vykonať 'fetch' na 'WorkerGlobalScope': Nepodarilo sa analyzovať URL z /images/ui/background_fire.jpg

Takže predpokladám, že sa to nevyriešuje správne, ako by sa to vyriešilo napríklad v src obrázka?

Odpoveď č. 1

@NasiruddinSaiyed odpoveď je trochu zastaraná, tak tu je odpoveď z roku 2021:

Dokumentácia polyfiltrov na strane servera NextJS

Polyfily na strane servera

Okrem použitia fetch() na klientskej strane, Next.js zabezpečuje polyfily pre fetch() aj v prostredí Node.js. Môžete používať fetch() vo vašom serverovom kóde (napríklad v getStaticProps) bez použitia polyfilov ako isomorphic-unfetch alebo node-fetch.

Takže by to malo fungovať hneď po vybalení

Odpoveď č. 2

Podľa oficiálnych dokumentov je potrebné použiť isomorphic-unfetch.

It's a simple implementation of the browser fetch API, but works both in client and server environments.

Nainštalujte to

$npm install --save isomorphic-unfetch

alebo

$yarn add isomorphic-unfetch

Teraz ho môžete použiť od getInitialProps kamkoľvek vo vašej komponente.

Príklad ::

`import fetch from 'isomorphic-unfetch';`

// ... Index component code

Index.getInitialProps = async function() { 

  const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
  const data = await res.json();
    
  console.log(`Show data fetched. Count: ${data.length}`);
    
  return {
    shows: data.map(entry => entry.show)
  };
};

Šťastné kódovanie!!