如何使用 Next Js 和多个图像域 URL

Question

当Next Js Image组件与外部镜像一起使用时，需要在next.js配置文件中输入镜像源的域名。对于来自多个域的多个图像（例如，100 个不同的图像 URL），我如何能够在 next.js 配置文件中输入所有 100 个域。为了节省时间，而不是手动输入数百个域名，最好的方法是什么？谢谢

Answer 1

如果您愿意绕过允许的域限制，则需要创建 Next.js API。API 将能够充当图像代理，并通过给定的 url 作为字符串从任何主机获取所需的图像。

\n

考虑下面的例子：

\n

\n

/pages/api/imagefetcher.js

\n

\n

      export default async (req, res) => {\n      const url = decodeURIComponent(req.query.url);\n      const result = await fetch(url);\n      const body = await result.body;\n      body.pipe(res);\n    };\n

\n

\n

/pages/index.jsx

\n

\n

        <Image\n          alt='my image'\n          src={`/api/imagefetcher?url=${encodeURIComponent(\n            'https://i.imgur.com/iPeCach.png'\n          )}`}\n          width={350}\n          height={350}\n          quality={80}\n        />\n

\n

\xe2\x9a\xa0\xef\xb8\x8f 一旦您拥有已知的主机名/域列表，您就不应该立即使用此方法。

\n