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"

I'm currently using normal img tag,but I would like to use next's Image tag to get a better optimisation. — Sai Krishnadas, Feb 23 '22 at 11:31
You might try using regex with Loader https://nextjs.org/docs/api-reference/next/image#loader — Mohammad Tbeishat, Feb 23 '22 at 11:37

score 54 · Answer 1 · answered Oct 04 '22 at 16:48

54

It works for me, accordingly next.js documentation:

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

next.js remote patterns

answered Oct 04 '22 at 16:48

Oleg Zaicev

541
3
3

2

`remotePatterns` exists [since v12.3.0](https://github.com/vercel/next.js/releases/tag/v12.3.0). It was [first introduced in v12.2.0](https://nextjs.org/blog/next-12-2#remote-patterns-experimental) as an experimental feature. – Advena Nov 14 '22 at 13:42
Any idea why this could fail for `https://www.si.com`? It works for all other URLs but this one still throws. – Florian Walther Feb 18 '23 at 14:22
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: https://github.com/vercel/next.js/discussions/50028 , https://stackoverflow.com/questions/76181016/what-wrong-next-js-image-dont-work-on-server – XAZG Неизвестный May 20 '23 at 13:49

score 15 · Answer 2 · answered Feb 23 '22 at 11:39

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

See https://nextjs.org/docs/api-reference/next/image#loader-configuration, there is a dedicated option for loaders now. — Moritz Schmitz v. Hülst, Jun 13 '22 at 13:02
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. — Ramakay, Jun 13 '22 at 19:48
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. — Moritz Schmitz v. Hülst, Jun 14 '22 at 09:43

How to allow all domains for Image nextjs config?

2 Answers2

Solve

Linked