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.

[jdhenry08]

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.

@styfle If this is expected behavior, it's not clear in the docs. Instead of just closing this issue as not planned, can we get an update to the docs to make it clearer that this is how the new URL format works? As it stands, it's a change in the default behavior with no clear explanation.

[styfle]

Its documented here: https://nextjs.org/docs/app/api-reference/components/image#remotepatterns

You can see that omitting the query string in the URL is the same as setting to search: ''.

It also clarifies:

The example above will ensure the src property of next/image must start with https://example.com/account123/ and must not have a query string.