With all remotePatterns allowed for images, some image URLs are still rejected

[WillCalderwood]

Link to the code that reproduces this issue

https://github.com/WillCalderwood/next-bug

To Reproduce

1. Start the application and you'll receive the error

Error: Invalid src prop [(https://bioage.typepad.com/.a/6a00d8341c4fbe53ef02c8d3a82122200d-600wi)](http://localhost:3000/admin/news/(https://bioage.typepad.com/.a/6a00d8341c4fbe53ef02c8d3a82122200d-600wi)) on `next/image`, hostname "bioage.typepad.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Current vs. Expected behavior

The image https://bioage.typepad.com/.a/6a00d8341c4fbe53ef02c8d3a82122200d-600wi is not allowed when all image remotes are set as valid with:

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

The image should not be throwing an error.

Note: It works correctly with unoptimized={true} specified.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 20.8.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.47
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image optimization (next/image, next/legacy/image)

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

[coltonehrman]

@WillCalderwood Seems to be a "qwerk" with the micromatch lib which is used to generate a RegEx based on globs. I messed around with this a bit and was able to produce a working pathname glob for this URL. This issue is the dot . inside the pathname.

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

[flyingn1nja]

@WillCalderwood Seems to be a "qwerk" with the micromatch lib which is used to generate a RegEx based on globs. I messed around with this a bit and was able to produce a working pathname glob for this URL. This issue is the dot . inside the pathname.

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

I tried:

  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
        pathname: '/.*/**',
      },
      {
        protocol: 'http',
        hostname: '**',
        pathname: '/.*/**',
      },
    ],
  },

But unfortunately does not work. Do you have any other solutions?

EDIT:
Sorry, of course it does not work. I have different url structure. This is how my url looks like.

https://raw.githubusercontent.com/balabla/something-something-list/main/src/something-assets/aa.jpg

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.