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 <contact@florian-lefebvre.dev>

* fix: encodeURI the returned filepath directly

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Co-authored-by: Princesseuh <3019731+Princesseuh@users.noreply.github.com>

5 files changed, 34 insertions, 2 deletions

diff --git a/.changeset/weak-oranges-relate.md b/.changeset/weak-oranges-relate.md
new file mode 100644
index 000000000..c61c4b7e0
--- /dev/null
+++ b/.changeset/weak-oranges-relate.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+`<Image />` 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 8dfd86d66..85868f6e1 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 9d9ca92b8..3c2ff8899 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 000000000..66c86497e
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg
diff --git a/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro
new file mode 100644
index 000000000..64821825a
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro
@@ -0,0 +1,14 @@
+---
+import { Image } from "astro:assets";
+import imageWithSpaces from "../assets/image 1.jpg";
+---
+
+<div id="local-2-widths-with-spaces">
+	<!--
+		In this example, only two images should be generated :
+		- The base image
+		- The 2x image
+		Additionally, the image URL should be encoded to avoid issues with spaces and other special characters.
+	-->
+	<Image src={imageWithSpaces} width={imageWithSpaces.width / 2} widths={[imageWithSpaces.width]} alt="" />
+</div>