Question

我有以下用例场景。我有一个Web worker，需要在其中提取NextJS public文件夹中的图像，以便将其转换为blob。

立即执行fetch('public/images/myImage.png');或fetch('/images/myImage.png');会导致错误：

错误：TypeError：无法在'WorkerGlobalScope'上执行'fetch'：无法从/images/ui/background_fire.jpg解析URL

因此，我认为它没有像图像中的src那样正确地解析？

Answer 1

@NasiruddinSaiyed 的回答有点过时，所以这里是 2021 年的回答：

NextJS server-side-polyfills docs

<块引用>

服务器端 Polyfills

除了客户端的 fetch() 之外，Next.js 还填充了 Node.js 环境中的 fetch()。您可以在服务器代码（例如 getStaticProps）上使用 fetch()，而无需使用诸如 isomorphic-unfetch 或 node-fetch 之类的 polyfill。

所以它应该开箱即用

Answer 2

根据 official Docs ，您需要使用isomorphic-unfetch。

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

使用npm安装

npm install-保存isomorphic-unfetch
将其导入您的组件

从'isomorphic-unfetch'导入获取；
现在您可以从getInitialProps到组件中的任何位置使用它。

示例::

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)
  };
};

编码愉快！

如何从NextJS的公用文件夹中获取（）？

2 个答案:

服务器端 Polyfills