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

withastro · Jul 3, 2023 · e644b34 · e644b34
1 parent 3df71fd
commit e644b34
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 1 deletion.
diff --git a/.changeset/few-ants-brake.md 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
@@ -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
@@ -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
@@ -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
@@ -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);
-Original file line number
+Diff line change
@@ Expand Up @@
     					image = img;
     				}
-    				return `${encodeURI(img.src ?? '')} ${width}w`;
+    				return `${img.src?.replaceAll(' ', encodeURI)} ${width}w`;
     			})
     		);
@@ Expand Down @@