CODEWITHSUNDEEP
next.jsnextjs-image
Sai Krishnadas
Sai Krishnadas

Reputation: 3419

How to allow all domains for Image nextjs config?

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"

Upvotes: 50

Views: 103500

Answers (4)

Mohammad Aghayari
Mohammad Aghayari

Reputation: 1160

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;

Upvotes: 8

Rudr Prasad
Rudr Prasad

Reputation: 51

best and current way to do it is

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

all other methods are deprecated

Upvotes: 4

Oleg Zaicev
Oleg Zaicev

Reputation: 1161

It works for me, accordingly next.js documentation:

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

Next.js configuration options

Upvotes: 116

Ramakay
Ramakay

Reputation: 3145

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

Upvotes: 18

Related Questions