fix: make `Picture` generate valid dev URLs (#7500)

5 files changed, 36 insertions, 1 deletions

diff --git a/.changeset/few-ants-brake.md b/.changeset/few-ants-brake.md
new file mode 100644
index 000000000..607c248ae
--- /dev/null
+++ b/.changeset/few-ants-brake.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/image": patch
+---
+
+fix: make `Picture` generate valid dev URLs
diff --git a/packages/integrations/image/src/lib/get-picture.ts b/packages/integrations/image/src/lib/get-picture.ts
index 53b9aea8a..c0eaa4058 100644
--- a/packages/integrations/image/src/lib/get-picture.ts
+++ b/packages/integrations/image/src/lib/get-picture.ts
@@ -85,7 +85,7 @@ export async function getPicture(params: GetPictureParams): Promise<GetPictureRe
 					image = img;
 				}
 
-				return `${encodeURI(img.src ?? '')} ${width}w`;
+				return `${img.src?.replaceAll(' ', encodeURI)} ${width}w`;
 			})
 		);
 
diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js
index 61b4f8e2b..5f56ec53c 100644
--- a/packages/integrations/image/test/picture-ssg.test.js
+++ b/packages/integrations/image/test/picture-ssg.test.js
@@ -195,6 +195,16 @@ describe('SSG pictures with subpath - dev', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture.children('source').map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);
diff --git a/packages/integrations/image/test/picture-ssr-build.test.js b/packages/integrations/image/test/picture-ssr-build.test.js
index 5e760d0b4..6c06fd1fc 100644
--- a/packages/integrations/image/test/picture-ssr-build.test.js
+++ b/packages/integrations/image/test/picture-ssr-build.test.js
@@ -223,6 +223,16 @@ describe('SSR pictures with subpath - build', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture.children('source').map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);
diff --git a/packages/integrations/image/test/picture-ssr-dev.test.js b/packages/integrations/image/test/picture-ssr-dev.test.js
index 325e0d08b..39a5431dc 100644
--- a/packages/integrations/image/test/picture-ssr-dev.test.js
+++ b/packages/integrations/image/test/picture-ssr-dev.test.js
@@ -127,6 +127,16 @@ describe('SSR pictures - dev', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture.children('source').map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);