fix: encodeURI the returned filepath directly

withastro · Dec 28, 2023 · 4fe883e · 4fe883e
1 parent ce52c4f
commit 4fe883e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/packages/astro/src/assets/internal.ts b/packages/astro/src/assets/internal.ts
@@ -110,7 +110,7 @@ export async function getImage(
 		src: imageURL,
 		srcSet: {
 			values: srcSets,
-			attribute: srcSets.map((srcSet) => `${encodeURI(srcSet.url)} ${srcSet.descriptor}`).join(', '),
+			attribute: srcSets.map((srcSet) => `${srcSet.url} ${srcSet.descriptor}`).join(', '),
 		},
 		attributes:
 			service.getHTMLAttributes !== undefined

diff --git 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/fixtures/core-image-ssg/src/pages/srcset.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro
@@ -8,8 +8,7 @@ import imageWithSpaces from "../assets/image 1.jpg";
 		In this example, only two images should be generated :
 		- The base image
 		- The 2x image
-		- The image path should replace ' ' with '%20' in srcset 
+		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>
-