Best way to handle Image with arbitrary src

[ChiuMungZitAlexander]

It is my situation that the images are from different unkown cdn.

According the docs, I have to define remotePatterns if I try to use <Image>.

However, as I mentioned above, in this case never could I list all the cdn hosts in the next.config.js.

I just wonder if there is a way to do so? Or should I use <img> instead?

[kfirfitousi]

From the docs:

Wildcard patterns can be used for both pathname and hostname and have the following syntax:
* match a single path segment or subdomain
** match any number of path segments at the end or subdomains at the beginning

So you can have something like:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
      },
    ],
  },
}

which will allow any domain.

[ChiuMungZitAlexander]

A universal way😈