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 over time.

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"

Dieball

An alternative is to use <img /> tag instead of Next JS <Image /> tag. – Nephew

I'm currently using normal img tag,but I would like to use next's Image tag to get a better optimisation. – Dieball

You might try using regex with Loader nextjs.org/docs/api-reference/next/image#loader – Nephew

Answer 1

It works for me, accordingly next.js documentation:

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

Next.js configuration options

Zionism

remotePatterns exists since v12.3.0. It was first introduced in v12.2.0 as an experimental feature. – Fallingout

Any idea why this could fail for https://www.si.com? It works for all other URLs but this one still throws. – Monazite

Please tell me, I have updated next.js 12.3.4. and prescribe remotePatterns. But when building, I get into images (the "url" parameter is not allowed). Have you ever encountered such a thing ? I described the problem in more detail in the topics below: github.com/vercel/next.js/discussions/50028 , #76181516 – Freedafreedman

Indeed it work for all except thing like : www... thestreet.com/.image/… – Obligato

Answer 2

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

Sadler

See nextjs.org/docs/api-reference/next/image#loader-configuration, there is a dedicated option for loaders now. – Breadwinner

Per my understanding, the question asks for all domains to be allowed - even with a custom loader you have to be explicit about the URL string. – Sadler

Yeah and you suggested to whitelist the res.cloudinary.com domain and then use the fetch API. Instead you could just use the cloudinary loader. No need to prepend the cloudinary URL to the actual URL then. – Breadwinner

Answer 3

Your solution is here:

images.domains is deprecated in NextJs 14.

To refer next js new doc, you have to use like bellow code in next.config.js file.

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https", // or http
        hostname: "www.your-website.com", // if your website has no www, drop it
      },
    ],
  },
};
module.exports = nextConfig;

Aubergine

Answer 4

best and current way to do it is

images: {
   remotePatterns: [
   {
      protocol: "https",
      hostname: "**",
    },
   ],
},

all other methods are deprecated

Subnormal