fix: encode spaces when generating srcset

[wooseopkim]

Changes

• Fixes getPicture may generate invalid srcset values after SSR #7338.
  • HELLO WORLD.png currently will have srcset of HELLO WORLD.png 100w.
  • In that case any sources are ignored and img's src will be rendered.
  • Browser complains, but it's just console.warn calls.

Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate "/_astro/HELLO"

Testing

• packages/integrations/image/test/picture-ssg.test.js
• packages/integrations/image/e2e/picture.test.js
  • Is it okay to duplicate the whole basic-picture fixture?

Docs

• Fixed bug in Picture and getPicture with space characters in filenames.

[changeset-bot]

🦋 Changeset detected

Latest commit: 57af68b

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[wooseopkim]

AFAIK encoding the whole img.src was not required. I've tested the filename @withastro:안녕하세요🚀+❤.jpg which contains an emoji, URI reserved characters, and Korean chracters but it seemed okay before (and also after) applying this.

[Princesseuh]

The code looks great to me (feel free to use encodeUri though if it does fix the problem, that way we're fully covered!), however the testing strategy is very heavy-handed and we've been trying to improve our testing strategy recently.

I'd suggest not using a full E2E test for this and instead just adding a test to this file: https://github.com/withastro/astro/blob/main/packages/integrations/image/test/picture-ssg.test.js

[wooseopkim]

@Princesseuh Yeah, agreed and understood. Actually I've also updated test/picture-ssg.test.js. In this case, would it be enough to delete the e2e directory?

[bluwy]

I think we can remove playwright entirely with the new test. I'm also slightly leaning towards encodeUri as the more correct way of handling this