nextjs - 💡(How to fix) Fix Image src that includes more than 1 query param results in broken output [9 comments, 3 participants]

TL;DR

The issue can be fixed by properly encoding URLs with multiple query parameters in the href attribute of the link tag.

Guidance

• Verify that the href attribute is correctly encoded by checking the HTML output in the network monitor.
• Check the Next.js configuration to ensure that URL encoding is properly handled.
• Consider using a library or function to encode URLs with multiple query parameters, such as encodeURIComponent() in JavaScript.
• Inspect the next/image component to see if it has any options for handling URL encoding.

Example

<link rel="preload" href="https://picsum.photos/id/870/200/300?grayscale=1&blur=2" as="image"/>

can be replaced with

const encodedUrl = encodeURIComponent('https://picsum.photos/id/870/200/300?grayscale=1&blur=2');
// use encodedUrl in the href attribute

Notes

The issue seems to be related to the encoding of URLs with multiple query parameters. The provided code snippet shows that the href attribute is not properly encoded, which can cause issues with crawlers and other non-browser clients.

Recommendation

Apply workaround: Use a library or function to encode URLs with multiple query parameters, such as encodeURIComponent() in JavaScript, to ensure that the href attribute is correctly encoded.