imageCacheTag does not check URL for already present parameters

[barthy-koeln]

Describe the Bug

Same error as #9880 and #9993 however I can provide a reproducer.

Summary of the error:

In packages/ui/src/elements/Thumbnail/index.tsx

The recently introduced imageCacheTag gets appended to an image URL.
It should check the URL for parameters and append to the parameters list with &param=value instead of a simple ?param=value.

Use-case: I am using a /_next/image?url=https.....jpg&w=384&q=75 URL to generate thumbnails for remotely hosted images.

Appending a ?cacheTag=... breaks the integer parsing for the quality param in next, and will break other hosting services like AWS S3, CloudFront CDN, ...

Link to the code that reproduces this issue

https://github.com/barthy-koeln/payload-repro-cachetag-param

Reproduction Steps

Use the existing user in the sqlite DB ([email protected] as name and pw) or create a new one.
Upload a new Media item, then navigate to its edit page (you should be there after the upload anyway).

The thumbnail is broken.

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

area: ui

Environment Info

Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 9.15.0
Relevant Packages:
  payload: 3.9.0
  next: 15.1.0
  @payloadcms/email-nodemailer: 3.9.0
  @payloadcms/graphql: 3.9.0
  @payloadcms/next/utilities: 3.9.0
  @payloadcms/payload-cloud: 3.9.0
  @payloadcms/richtext-lexical: 3.9.0
  @payloadcms/translations: 3.9.0
  @payloadcms/ui/shared: 3.9.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: darwin
  Arch: arm64

[paulpopus]

Thanks for your repro, I think the linked issues are relevant but not the exact same fix. I've outlined the solution in the related PR.

[github-actions]

🚀 This is included in version v3.17.0

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.