Support remote images with encoded characters (withastro#9540)

* Support remote images with encoded characters * Add a changeset * Update .changeset/small-snakes-build.md Co-authored-by: Florian Lefebvre <[email protected]> --------- Co-authored-by: Florian Lefebvre <[email protected]>
florian-lefebvre · Dec 28, 2023 · 7f212f0 · 7f212f0
1 parent b34bd2b
commit 7f212f0
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 2 deletions.
diff --git a/.changeset/small-snakes-build.md b/.changeset/small-snakes-build.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes remote images with encoded characters
diff --git a/packages/astro/src/assets/utils/transformToPath.ts b/packages/astro/src/assets/utils/transformToPath.ts
@@ -10,7 +10,7 @@ export function propsToFilename(transform: ImageTransform, hash: string) {
 		isESMImportedImage(transform.src) ? transform.src.src : transform.src
 	);
 	const ext = extname(filename);
-	filename = basename(filename, ext);
+	filename = decodeURIComponent(basename(filename, ext));
 
 	let outputExt = transform.format ? `.${transform.format}` : ext;
 	return `/${filename}_${hash}${outputExt}`;

diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
@@ -747,7 +747,7 @@ describe('astro:image', () => {
 				root: './fixtures/core-image-ssg/',
 				image: {
 					service: testImageService(),
-					domains: ['astro.build'],
+					domains: ['astro.build', 'avatars.githubusercontent.com'],
 				},
 			});
 			// Remove cache directory
@@ -945,6 +945,15 @@ describe('astro:image', () => {
 			expect(data).to.be.an.instanceOf(Buffer);
 		});
 
+		it('supports images with encoded characters in url', async () => {
+			const html = await fixture.readFile('/index.html');
+			const $ = cheerio.load(html);
+			const img = $('#encoded-chars img');
+			const src = img.attr('src')
+			const data = await fixture.readFile(src);
+			expect(data).to.not.be.undefined;
+		});
+
 		describe('custom service in build', () => {
 			it('uses configured hashes properties', async () => {
 				await fixture.build();

diff --git a/packages/astro/test/fixtures/core-image-ssg/public/documents/ProductCoverImages/ghost.webp b/packages/astro/test/fixtures/core-image-ssg/public/documents/ProductCoverImages/ghost.webp
diff --git a/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/index.astro
@@ -14,5 +14,9 @@ import myImage from "../assets/penguin1.jpg";
 	<div id="remote">
 		<Image src="https://avatars.githubusercontent.com/u/622227?s=64" alt="fred" width="48" height="48" />
 	</div>
+
+	<div id="encoded-chars">
+		<Image src="https://avatars.githubusercontent.com/u%2f622227?s=64" alt="fred2" width="48" height="48" />
+	</div>
 </body>
 </html>