From 16e61fcacb98e6bd948ac240bc082659d70193a4 Mon Sep 17 00:00:00 2001 From: Alex Waldron <51122673+walter9388@users.noreply.github.com> Date: Thu, 28 Dec 2023 21:23:46 +0000 Subject: [PATCH] fix: handle srcset local image paths with spaces (#9537) * fix: handle srcset local image paths with spaces * replaced janky 'replaceAll' with encodeURI * Update .changeset/weak-oranges-relate.md Co-authored-by: Florian Lefebvre * fix: encodeURI the returned filepath directly --------- Co-authored-by: Florian Lefebvre Co-authored-by: Matthew Phillips Co-authored-by: Princesseuh <3019731+Princesseuh@users.noreply.github.com> --- .changeset/weak-oranges-relate.md | 5 +++++ packages/astro/src/assets/vite-plugin-assets.ts | 6 ++++-- packages/astro/test/core-image.test.js | 11 +++++++++++ .../core-image-ssg/src/assets/image 1.jpg | Bin 0 -> 8674 bytes .../core-image-ssg/src/pages/srcset.astro | 14 ++++++++++++++ 5 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 .changeset/weak-oranges-relate.md create mode 100644 packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg create mode 100644 packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro diff --git a/.changeset/weak-oranges-relate.md b/.changeset/weak-oranges-relate.md new file mode 100644 index 000000000000..c61c4b7e05e8 --- /dev/null +++ b/.changeset/weak-oranges-relate.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +`` srcset now parses encoded paths correctly diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index 8dfd86d66264..85868f6e1ce3 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/packages/astro/src/assets/vite-plugin-assets.ts @@ -132,10 +132,12 @@ export default function assets({ }); } + // The paths here are used for URLs, so we need to make sure they have the proper format for an URL + // (leading slash, prefixed with the base / assets prefix, encoded, etc) if (settings.config.build.assetsPrefix) { - return joinPaths(settings.config.build.assetsPrefix, finalFilePath); + return encodeURI(joinPaths(settings.config.build.assetsPrefix, finalFilePath)); } else { - return prependForwardSlash(joinPaths(settings.config.base, finalFilePath)); + return encodeURI(prependForwardSlash(joinPaths(settings.config.base, finalFilePath))); } }; }, diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 9d9ca92b8646..3c2ff8899d8d 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -945,6 +945,17 @@ describe('astro:image', () => { expect(data).to.be.an.instanceOf(Buffer); }); + it('client images srcset parsed correctly', async () => { + const html = await fixture.readFile('/srcset/index.html'); + const $ = cheerio.load(html); + const srcset = $('#local-2-widths-with-spaces img').attr('srcset'); + + // Find image + const regex = /^(.+?) [0-9]+[wx]$/gm; + const imageSrcset = regex.exec(srcset)[1]; + expect(imageSrcset).to.not.contain(' '); + }); + it('supports images with encoded characters in url', async () => { const html = await fixture.readFile('/index.html'); const $ = cheerio.load(html); diff --git a/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg b/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..66c86497e311859da9af9b35587312919f872209 GIT binary patch literal 8674 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 d4IoV3IGA$TJ# + + +