如何使用 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}
        />

⚠️一旦你有一个已知的主机名/域列表，你不应该使用这个方法。