fix: MDX cannot find relative image path without leading ./ (#10754)

Co-authored-by: Oliver Speir <115520730+OliverSpeir@users.noreply.github.com>

.changeset/curly-badgers-boil.md

@@ -0,0 +1,16 @@
+---
+"@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/index.ts

@@ -106,6 +106,13 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 										}
 									}
 								},
+								async resolveId(source, importer, options) {
+									if (importer?.endsWith('.mdx') && source[0] !== '/') {
+										let resolved = await this.resolve(source, importer, options);
+										if (!resolved) resolved = await this.resolve('./' + source, importer, options);
+										return resolved;
+									}
+								},
 								// Override transform to alter code before MDX compilation
 								// ex. inject layouts
 								async transform(_, id) {

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

@@ -24,7 +24,6 @@ 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, '_')}__`;
-
 					importsStatements.push({
 						type: 'mdxjsEsm',
 						value: '',
@@ -35,7 +34,11 @@ export function remarkImageToComponent() {
 								body: [
 									{
 										type: 'ImportDeclaration',
-										source: { type: 'Literal', value: node.url, raw: JSON.stringify(node.url) },
+										source: {
+											type: 'Literal',
+											value: node.url,
+											raw: JSON.stringify(node.url),
+										},
 										specifiers: [
 											{
 												type: 'ImportDefaultSpecifier',

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

@@ -9,3 +9,9 @@ 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)
+
+Image using a relative path with nested directory:
+![Houston](relative/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, 6);
 			// Image using a relative path
 			assert.equal(imgs.item(0).src.startsWith('/_image'), true);
 			// Image using an aliased path
@@ -38,6 +38,10 @@ 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);
+			// Image using a relative path with nested directory
+			assert.equal(imgs.item(5).src.startsWith('/_image'), true);
 		});
 
 		for (const route of imageTestRoutes) {