fix(prerender): Encode URLs to preserve "," in X-Nitro-Prerender Header

[posixpascal]

When using IPX provider in combination with placeholder attribute the final URL that will get added to the X-Nitro-Prerender header contains a plain comma.

Due to the way nitropack currently works this will break static generation of these images due to this LOC in nitropack:

_links.push(...header.split(",").map((i) => i.trim()));

You can reproduce the issue yourself with the latest NPM version of @nuxt/image-edge (^1.0.0-27840416.dc1ed65):

<template>
<div>
     <nuxt-img src="images/logo.svg" /> 
     <nuxt-img src="images/logo.svg" placeholder />
</div>
</template>

When using the above vue component only one image will get statically generated when running yarn run generate.
The placeholder image gets lost due to the URL being /_ipx/q_50,s_10x10/images/logo.svg which nitropack reads as:

• /_ipx/_50
• s_10x10/images/logo.svg

This bug is (closely) related to the following issues:

• various issues with nuxt image in production #689
• "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65". still doesn't support static images  #690
• [nuxt3] Static image generation still results in 404 after latest update for certain images only #671

I've also opened a companion PR on nitropack here: nitrojs/nitro#799

[netlify]

👷 Deploy request for nuxt-image-v1 pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	b588cb7

[pi0]

Thanks for the PR @posixpascal ❤️ We shall merge this PR after upstream nitrojs/nitro#799 got merged alongside with Nuxt 3.1 release awaiting Nitropack v2.

[pi0]

Hmm thinking more, in the meantime, we might have a faster workaround. IPX supports & in addition to , for separators (https://github.com/unjs/ipx/blob/ca4d06705ccded4ddfbb453aaf5cb404652e5b0f/src/middleware.ts#L8). Can you please try if we can use an inline replace to only encode , as & in path segments? (IPX itself also decodes, perhaps we can completely encode that segment even and keep using ,)

[posixpascal]

It does indeed work by just replacing , with & and without doing the additional decode on nitropack.

I still think a decode on nitropack is necessary when the filename themselves contain , but for now replacing , with & is a good workaround.

I've updated the PR. Let me know if you know a better place to solve the problem as I'm not familiar with the code base yet.

[pi0]

Hey. Sorry for delay on this. Since Nitro v2 and Nuxt 3.1 with fix are coming soon (today/tomorrow) we can use more proper upstream fix in nitrojs/nitro#799.

[posixpascal]

I've added the required codestyle changes.

[Zielgestalt]

@posixpascal I can confirm that the images are now generated with '&' as separator in the folders. That's great! Thanks.
But in the html-files the src is still with a ',' - so the images are not found. Maybe this is another step and not part of this pull request? If so - sorry for disturbing ;-)

[pi0]

Thanks for PR! Landed via #725