javascript - 如何让 Next.Js 下载我在网站中使用的所有外部资源并在本地提供它们？

Question

我一直在用 headless WordPress 和 NextJs 构建一个投资组合。我编写了自己的函数来从 GraphQl 端点获取数据。一切正常。但我有媒体文件(图像、pdf 等)存储在 WordPress CMS 上并作为指向 next.Js 的链接导入(作为外部图像导入)。例如:

<img src="https://wordpresscms.mywebsite.com/uploads/2020/02/myimage.png" />

但我希望 Assets 托管在 nextJs 网站上，并在每次构建时自动更新。
有没有办法在 Next.Js 中自动执行此操作？或者当我将我的网站部署到生产环境时，这是否已经完成？
我脑海中的情景:

我将 Assets 上传到 WordPress cms。

NextJs 从 WordPress 获取 JSON 数据，其中包括指向
外部 Assets (在构建时使用 GraphQL API
(getStaticProps))

NextJs 下载 Assets 。

NextJs 将外部 URL 替换为本地 URL(与我的 NextJs 网站托管在同一主机上)。

谢谢。

Answer 1

我可以看到您可能感兴趣的两种解决方案:

和你解释的更相似

在第 2 步之后 - 编写一个将在 getStaticProps 中使用的函数，该函数将通过 JSON 映射到外部 Assets 的链接，获取每个 Assets 并将它们保存为数组或字典中的文件，将该对象传递到您的页面并分发它通过应用程序。
这将在每个构建中获取所有 Assets 并显示在您放置它们的任何位置，但是它不会按照您的需要更新外部 URL - 您需要将文件从 getStaticProps 传递到您需要此帮助的每个元素。
这可能会帮助您开始: How can I convert an image into Base64 string using JavaScript?

更简单的方式:
在第 2 步之后。 - 只需将解析后的 JSON 与所有图像 url 一起传递，使用 url 来显示 Assets ，例如: