next/image remotePatterns config search parameters bug

[0xCodeMaieutics]

Link to the code that reproduces this issue

https://github.com/0xCodeMaieutics/remote-patterns-image-config-bug

To Reproduce

1. Setup Next.js
2. Create image with https://avatars.githubusercontent.com/u/74867549?v=4 src
3. Follow this guide: https://nextjs.org/docs/messages/next-image-unconfigured-host#fixing-older-versions-of-nextjs
   You will end up doing something like this:

  images: {
    remotePatterns: [new URL("https://avatars.githubusercontent.com/u/**")]
  }

I also tried this:

  images: {
    remotePatterns: [new URL("https://avatars.githubusercontent.com/u/**/*")]
  }

But only works when you do this:

  images: {
    remotePatterns: [new URL("https://avatars.githubusercontent.com/u/**/*?v=4")]
  }

Current vs. Expected behavior

Current:
Getting Error: Invalid src prop (https://avatars.githubusercontent.com/u/74867549?v=4) on next/image, hostname "avatars.githubusercontent.com" is not configured under images in your next.config.js` error when trying to display the image

Expected: shouldn't throw any error when configuring only with wildcard without the v=4 param.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.13.0
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 9.4.0
Relevant Packages:
  next: 15.3.0
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

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

Image (next/image)

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

next dev (local)

Additional context

No response

[Han5991]

I found the cause of this problem, and soon. I'll solve it and open the pr

[jaswanth27p]

got any solution?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[styfle]

But only works when you do this:

    remotePatterns: [new URL("https://avatars.githubusercontent.com/u/**/*?v=4")]

This is expected behavior. In most cases, remote images don't have a query string so the new URL pattern does not assume its there. If you want more flexibility you can use the old object format and it will assume wildcards for anything omitted.

remotePatterns: [{ protocol: 'https', hostname: 'avatars.githubusercontent.com', pathname: '/u/**/*' }],

Although for the example you gave, I think its best to use the ?v=4 in remotePatterns since its a constant.

Another option since this is coming from github and the version probably doesn't matter is to strip the query string before assigning the src prop.