Handle encoded image paths in markdown (#11310)

.changeset/eleven-hats-tell.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Handles encoded image paths in internal rehype plugins and return decoded paths from markdown vfile's `data.imagePaths`

packages/astro/test/core-image.test.js

@@ -489,7 +489,10 @@ describe('astro:image', () => {
 				$ = cheerio.load(html);
 
 				let $img = $('img');
-				assert.equal($img.attr('src').startsWith('/_image'), true);
+				assert.equal($img.length, 3)
+				$img.each((_, el) => {
+					assert.equal(el.attribs.src?.startsWith('/_image'), true);
+				})
 			});
 
 			it('properly handles remote images', async () => {

packages/astro/test/fixtures/core-image/src/pages/specialChars.md

@@ -1,3 +1,5 @@
 ![C++](../assets/c++.png)
+![Penguin with space](../assets/penguin%20with%20space.jpg)
+![Penguin with percent](../assets/penguin%20with%20percent%25.jpg)
 
 Image with special characters in file name worked.

packages/markdown/remark/src/remark-collect-images.ts

@@ -11,12 +11,12 @@ export function remarkCollectImages() {
 		const imagePaths = new Set<string>();
 		visit(tree, ['image', 'imageReference'], (node: Image | ImageReference) => {
 			if (node.type === 'image') {
-				if (shouldOptimizeImage(node.url)) imagePaths.add(node.url);
+				if (shouldOptimizeImage(node.url)) imagePaths.add(decodeURI(node.url));
 			}
 			if (node.type === 'imageReference') {
 				const imageDefinition = definition(node.identifier);
 				if (imageDefinition) {
-					if (shouldOptimizeImage(imageDefinition.url)) imagePaths.add(imageDefinition.url);
+					if (shouldOptimizeImage(imageDefinition.url)) imagePaths.add(decodeURI(imageDefinition.url));
 				}
 			}
 		});