how to allow all domains for Image nextjs config

Question

I have various image url and changes over time (the image are taken for web by url address and not locally or from a private storage). In order to render <Image /> tag , domains should be passed on to nextjs config. It isn't possible to pass in 100s of url overtime. How to allow all domains ?

/** @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;

I tried this but dint work, "*.com"

Answer 1

The Domain is required to be explicit per their documentation

To protect your application from malicious users, you must define a list of image provider domains that you want to be served from the Next.js Image Optimization API.

You can also see that the source code allows for url's to be evaluated, a wildcard is not accepted.

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

Solve

You should look at a proxy like cloudinary or imgix and allow those domains in the next.config and use their fetch features to load external image.

i.e

With cloudinary as the allowed domain

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

and then in your code

<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}
/>

Important

The following StackBlitz utilizes their demo account to fetch an external image from Expedia.com, you should get your own account for production.

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