fix: images urls containing ' which are inferSize'd (#13692)

Le0Developer · ematipico · web-flow · commit 60d5be4af49a · 2025-04-28T13:08:55.000+01:00
Co-authored-by: Emanuele Stoppa &lt;my.burning@gmail.com&gt;
diff --git a/.changeset/dirty-months-hunt.md b/.changeset/dirty-months-hunt.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a bug where Astro couldn't probably use `inferSize` for images that contain apostrophe `'` in their name. 
diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts
@@ -15,7 +15,7 @@ export function getMarkdownCodeForImages(
 					const imageSources = {};
 					${localImagePaths
 						.map((entry) => {
-							const rawUrl = JSON.stringify(entry.raw);
+							const rawUrl = JSON.stringify(entry.raw).replace(/'/g, '&#x27;');
 							return `{
 											const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl.replace(
 												/[.*+?^${}()|[\]\\]/g,
@@ -25,7 +25,7 @@ export function getMarkdownCodeForImages(
 											let occurrenceCounter = 0;
 											while ((match = regex.exec(html)) !== null) {
 													const matchKey = ${rawUrl} + '_' + occurrenceCounter;
-													const imageProps = JSON.parse(match[1].replace(/&#x22;/g, '"'));
+													const imageProps = JSON.parse(match[1].replace(/&#x22;/g, '"').replace(/&#x27;/g, "'"));
 													const { src, ...props } = imageProps;
 													imageSources[matchKey] = await getImage({src: Astro__${entry.safeName}, ...props});
 													occurrenceCounter++;
@@ -35,7 +35,7 @@ export function getMarkdownCodeForImages(
 						.join('\n')}
 					${remoteImagePaths
 						.map((raw) => {
-							const rawUrl = JSON.stringify(raw);
+							const rawUrl = JSON.stringify(raw).replace(/'/g, '&#x27;');
 							return `{
 											const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl.replace(
 												/[.*+?^${}()|[\]\\]/g,
@@ -45,7 +45,7 @@ export function getMarkdownCodeForImages(
 											let occurrenceCounter = 0;
 											while ((match = regex.exec(html)) !== null) {
 													const matchKey = ${rawUrl} + '_' + occurrenceCounter;
-													const props = JSON.parse(match[1].replace(/&#x22;/g, '"'));
+													const props = JSON.parse(match[1].replace(/&#x22;/g, '"').replace(/&#x27;/g, "'"));
 													imageSources[matchKey] = await getImage(props);
 													occurrenceCounter++;
 											}
diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
@@ -493,7 +493,7 @@ describe('astro:image', () => {
 				$ = cheerio.load(html);
 
 				let $img = $('img');
-				assert.equal($img.length, 3);
+				assert.equal($img.length, 4);
 				$img.each((_, el) => {
 					assert.equal(el.attribs.src?.startsWith('/_image'), true);
 				});
diff --git a/packages/astro/test/fixtures/core-image/src/assets/penguin with apostrophe'.jpg b/packages/astro/test/fixtures/core-image/src/assets/penguin with apostrophe'.jpg
diff --git a/packages/astro/test/fixtures/core-image/src/pages/specialChars.md b/packages/astro/test/fixtures/core-image/src/pages/specialChars.md
@@ -1,5 +1,6 @@
 ![C++](../assets/c++.png)
 ![Penguin with space](../assets/penguin%20with%20space.jpg)
 ![Penguin with percent](../assets/penguin%20with%20percent%25.jpg)
+![Penguin with apostrophe](../assets/penguin%20with%20apostrophe%27.jpg)
 
 Image with special characters in file name worked.

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'astro': patch
 +---
++
 +Fixes a bug where Astro couldn't probably use `inferSize` for images that contain apostrophe `'` in their name.