fix: encode spaces when generating srcset (#7340)

.changeset/late-steaks-perform.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Fix problem where filenames with spaces produce invalid srcset attributes

packages/integrations/image/package.json

@@ -59,6 +59,7 @@
     "mocha": "^9.2.2",
     "rollup-plugin-copy": "^3.4.0",
     "sharp": "^0.32.1",
+    "srcset-parse": "^1.1.0",
     "vite": "^4.3.9"
   },
   "peerDependencies": {

packages/integrations/image/src/lib/get-picture.ts

@@ -85,7 +85,7 @@ export async function getPicture(params: GetPictureParams): Promise<GetPictureRe
 					image = img;
 				}
 
-				return `${img.src} ${width}w`;
+				return `${encodeURI(img.src ?? '')} ${width}w`;
 			})
 		);
 

packages/integrations/image/test/picture-ssg.test.js

@@ -6,6 +6,9 @@ import path from 'path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { join } from 'node:path';
 import { loadFixture } from './test-utils.js';
+import srcsetParse from 'srcset-parse';
+
+const matchSrcset = srcsetParse.default;
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 const toAstroImage = (relpath) =>
@@ -96,6 +99,11 @@ describe('SSG pictures - dev', function () {
 			const sources = picture.children('source');
 			expect(sources.length).to.equal(3);
 
+			sources.each((_, el) => {
+				const srcset = $(el).attr('srcset');
+				expect(matchSrcset(srcset).length).to.equal(2);
+			});
+
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
@@ -293,6 +301,8 @@ describe('SSG pictures - build', function () {
 				const source = $(el);
 				const srcset = source.attr('srcset');
 
+				expect(matchSrcset(srcset).length).to.equal(2);
+
 				for (const src of srcset.split(',')) {
 					const segments = src.split(' ');
 
@@ -400,6 +410,8 @@ describe('SSG pictures with subpath - build', function () {
 				const source = $(el);
 				const srcset = source.attr('srcset');
 
+				expect(matchSrcset(srcset).length).to.equal(2);
+
 				for (const src of srcset.split(',')) {
 					const [pathname, width] = src.split(' ');
 					const widthNum = parseInt(width.substring(0, width.length - 1));

pnpm-lock.yaml

@@ -3790,6 +3790,9 @@ importers:
       sharp:
         specifier: ^0.32.1
         version: 0.32.1
+      srcset-parse:
+        specifier: ^1.1.0
+        version: 1.1.0
       vite:
         specifier: ^4.3.9
         version: 4.3.9(@types/node@18.16.18)(sass@1.63.4)