fix: MDX cannot find relative image path without leading ./

.changeset/curly-badgers-boil.md

@@ -0,0 +1,14 @@
+---
+"@astrojs/mdx": patch
+---
+
+Fixes an issue where images in MDX required a relative specifier (e.g. `./`)
+
+Now, you can use the standard `![](img.png)` syntax in MDX files for images colocated in the same folder: no relative specifier required!
+
+There is no need to update your project; your existing images will still continue to work. However, you may wish to remove any relative specifiers from these MDX images as they are no longer necessary:
+
+```diff
+- ![A cute dog](./dog.jpg)
++ ![A cute dog](dog.jpg)
+<!-- This dog lives in the same folder as my article! -->

packages/integrations/mdx/src/remark-images-to-component.ts

@@ -24,7 +24,7 @@ export function remarkImageToComponent() {
 				// If we haven't already imported this image, add an import statement
 				if (!importName) {
 					importName = `__${importedImages.size}_${node.url.replace(/\W/g, '_')}__`;
-
+					const prefixedNodeUrl = (node.url.includes('/') ? '' : './') + node.url;
 					importsStatements.push({
 						type: 'mdxjsEsm',
 						value: '',
@@ -35,7 +35,11 @@ export function remarkImageToComponent() {
 								body: [
 									{
 										type: 'ImportDeclaration',
-										source: { type: 'Literal', value: node.url, raw: JSON.stringify(node.url) },
+										source: {
+											type: 'Literal',
+											value: prefixedNodeUrl,
+											raw: JSON.stringify(prefixedNodeUrl),
+										},
 										specifiers: [
 											{
 												type: 'ImportDefaultSpecifier',
@@ -47,7 +51,7 @@ export function remarkImageToComponent() {
 							},
 						},
 					});
-					importedImages.set(node.url, importName);
+					importedImages.set(prefixedNodeUrl, importName);
 				}
 
 				// Build a component that's equivalent to <Image src={importName} alt={node.alt} title={node.title} />

packages/integrations/mdx/test/fixtures/mdx-images/src/pages/index.mdx

@@ -9,3 +9,6 @@ Image with a title:
 
 Image with spaces in the path:
 ![Houston](<~/assets/houston in space.webp>)
+
+Image using a relative path with no slashes:
+![Houston](houston.png)

packages/integrations/mdx/test/mdx-images.test.js

@@ -29,7 +29,7 @@ describe('MDX Page', () => {
 			const { document } = parseHTML(html);
 
 			const imgs = document.getElementsByTagName('img');
-			assert.equal(imgs.length, 4);
+			assert.equal(imgs.length, 5);
 			// Image using a relative path
 			assert.equal(imgs.item(0).src.startsWith('/_image'), true);
 			// Image using an aliased path
@@ -38,6 +38,8 @@ describe('MDX Page', () => {
 			assert.equal(imgs.item(2).title, 'Houston title');
 			// Image with spaces in the path
 			assert.equal(imgs.item(3).src.startsWith('/_image'), true);
+			// Image using a relative path with no slashes
+			assert.equal(imgs.item(4).src.startsWith('/_image'), true);
 		});
 
 		for (const route of imageTestRoutes) {