BUG: incorrect url encoding in `<link rel="preload">` for prioritized images

[HelaGone]

Link to the code that reproduces this issue

https://github.com/HelaGone/image_testing

To Reproduce

1. build the application

2. start the server

3. visit the provided url

4. right click and select view source code

5. search for the link rel=preload of the imageSrcSet

6. 

7. see the wrong encoding of the & it's & and should be & or %26

8. copy the path and concatenate the path with the localhost:3000

9. see the error in the browser: "w" parameter (width) is required

   

Current vs. Expected behavior

current behavior is the error in the browser:

Expected behaviour: The image should resolve correctly in the browser.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.118 // Latest available version is detected (15.0.0-canary.118).
  eslint-config-next: N/A
  react: 19.0.0-rc-49496d49-20240814
  react-dom: 19.0.0-rc-49496d49-20240814
  typescript: 5.3.3
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)

Other (Deployed)

Additional context

This is affecting our application in production and reporting Google Search Console errors

Here is a production with wrong encoding

The same image with proper encoding:

[fersan96]

The same error :/

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!

[HelaGone]

hello Vercel / Next team. Do you have any update or eta to review this bug? Is there something we can do to solve this issue without losing the image optimization?

[Mohamed-Asar]

@HelaGone I'm also facing the same issue

[ica-nis]

We are also facing this issue. Firefox and Chrome seems to be automatically applying some html decoding on the preload url, thus avoiding this issue, but Safari does not, causing a lot of unnecessary 400 errors on our back end.