next.js - 如何使用 Next Js 和多个图像域 url

Question

Next Js Image 组件使用外部图片时，需要在next.js配置文件中输入图片来源的域名。对于来自多个域的多个图像(例如，假设有 100 个不同的图像 URL)，我将如何在 next.js 配置文件中输入所有 100 个域。什么是解决此问题的最佳方法以节省时间，而不必手动输入 100 个域。谢谢

Answer 1

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

考虑下面的例子:

/pages/api/imagefetcher.js

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

/pages/index.jsx

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

⚠️ 一旦有了已知的主机名/域列表，就不应该立即使用此方法。