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

我有以下用例场景。我有一个web worker，我需要在其中获取位于NextJS

public

文件夹中的图像，以便将其转换为blob

现在执行

fetch（'public/images/myImage.png'）

或

fetch（'/images/myImage.png'）导致错误：

错误：TypeError:未能在“WorkerGlobalScope”上执行“fetch”：
无法从/images/ui/background_fire.jpg解析URL

所以我假设它没有像图像的
src
那样被正确解析
 根据您需要使用的

这是浏览器获取API的一个简单实现，但在客户端和服务器环境中都可以使用。

安装它

$
npm安装--保存同构取消蚀刻

或

$
纱线添加同构未蚀刻

现在，您可以从
getInitialProps
到组件中的任何位置使用它

例如：

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


快乐编码
 @NasiruddinSaiyed的答案有点过时，因此以下是2021年的答案：


服务器端多边形填充
除了客户端的fetch（）之外，Node.js环境中的Next.js polyfills fetch（）。您可以在服务器代码（如getStaticProps）上使用fetch（），而无需使用多填充（如同构取消蚀刻或节点提取）

所以它应该是开箱即用的