如何允许 Image nextjs 配置的所有域？

Question

我有各种图像网址并随着时间的推移而变化（图像是通过网址地址获取的，而不是本地或来自私人存储）。为了渲染<Image />tag ，域应该传递给 nextjs 配置。随着时间的推移，不可能传递数百个 url。

如何允许所有域？

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      "img.etimg.com",
      "assets.vogue.com",
      "m.media-amazon.com",
      "upload.wikimedia.org",
    ],
  },
};

module.exports = nextConfig;

我试过这个但没用， "*.com"

Answer 1

它对我有用，因此 next.js 文档：

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

Next.js 配置选项

Answer 2

根据他们的文档，域必须是明确的

为了保护您的应用程序免受恶意用户的侵害，您必须定义希望由 Next.js 图像优化 API 提供服务的图像提供程序域的列表。

您还可以看到源代码允许评估 url，但不接受通配符。

https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx#L864

解决

您应该查看像 cloudinary 或 imgix 这样的代理，并允许这些域并next.config使用它们的 获取功能来加载外部图像。

IE

以 cloudinary 作为允许的域

module.exports = {
  images: {
    domains: ['res.cloudinary.com'],
  },
};

然后在你的代码中

<Image
src="https://res.cloudinary.com/demo/image/fetch/https://a.travel-assets.com/mad-service/header/takeover/expedia_marquee_refresh.jpg"
width={500}
height={500}
/>

重要的

下面的 StackBlitz 利用他们的演示帐户从 Expedia.com 获取外部图像，您应该拥有自己的帐户来进行生产。

https://stackblitz.com/edit/nextjs-pxrg99?file=pages%2Findex.js