Fix IPX static generation issue when using multiple format options

[jimhlad]

This fixes an issue with the IPX provider when multiple formatting options are applied.

Modified playground sample data as a minimal reproduction.

To test:

1. Make the change to playground/providers.ts shown here: https://github.com/nuxt/image/pull/673/files#diff-cdfcb4bb4c632950a1a834b483f874c9c3f5090efb60a1467e9e994403361276
2. Run npm run dev:generate and npx serve playground/.output/public
3. Observe colors image does not load on IPX page
4. Now apply the changes from this PR and run npm run dev:generate and npx serve playground/.output/public
5. Color image now loads

[marvincaspar]

Thanks, this fixes my issue with not generating all my image sizes. Hope that it will be merged soon

[jimhlad]

@pi0 For your review

[posixpascal]

I think this breaks placeholder generation for IPX as it generates the following URL when using the placeholder attribute:

/_ipx/q_50,s_10x10/images/slightly_smiling_face_3d.png

which is a valid IPX URL.

[jimhlad]

That's possible. If there's a better solution feel free to close this out.

Note: In addition to fixing the described bug, this PR also made it so that the downloaded directory names don't have commas or ampersands in them. Not sure if there's a better way to accomplish this, but to me it feels a bit hacky to have these characters in folder names. Underscores or hyphens seem cleaner. Also not sure if there are any SEO implications to consider here.

[pi0]

This should be fixed by #725. Please ping me to reopen if not. Also thanks for PRs ❤️