diff options
| -rw-r--r-- | .changeset/thirty-walls-yell.md | 15 | ||||
| -rw-r--r-- | packages/astro/src/vite-plugin-markdown/images.ts | 7 | ||||
| -rw-r--r-- | packages/astro/src/vite-plugin-markdown/index.ts | 10 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/markdown/src/pages/houston.png | bin | 0 -> 160915 bytes | |||
| -rw-r--r-- | packages/astro/test/fixtures/markdown/src/pages/images.md | 2 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/markdown/src/pages/relative/houston.png | bin | 0 -> 160915 bytes | |||
| -rw-r--r-- | packages/astro/test/markdown.test.js | 8 |
7 files changed, 33 insertions, 9 deletions
diff --git a/.changeset/thirty-walls-yell.md b/.changeset/thirty-walls-yell.md new file mode 100644 index 000000000..8e63d6e1c --- /dev/null +++ b/.changeset/thirty-walls-yell.md @@ -0,0 +1,15 @@ +--- +"astro": patch +--- + +Fixes an issue where images in MD required a relative specifier (e.g. `./`) + +Now, you can use the standard `` syntax in MD 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 MD images as they are no longer necessary: + +```diff +-  ++  +<!-- This dog lives in the same folder as my article! --> +``` diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index 751deff21..29afa2001 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -1,13 +1,10 @@ -export type MarkdownImagePath = { raw: string; resolved: string; safeName: string }; +export type MarkdownImagePath = { raw: string; safeName: string }; export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: string) { return ` import { getImage } from "astro:assets"; ${imagePaths - .map((entry) => { - const prefix = entry.raw.includes('/') ? '' : './'; - return `import Astro__${entry.safeName} from ${JSON.stringify(prefix + entry.raw)};`; - }) + .map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`) .join('\n')} const images = async function(html) { diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts index a77a6ede2..98362c89d 100644 --- a/packages/astro/src/vite-plugin-markdown/index.ts +++ b/packages/astro/src/vite-plugin-markdown/index.ts @@ -1,5 +1,4 @@ import fs from 'node:fs'; -import path from 'node:path'; import { fileURLToPath, pathToFileURL } from 'node:url'; import { InvalidAstroDataError, @@ -43,6 +42,13 @@ export default function markdown({ settings, logger }: AstroPluginOptions): Plug buildEnd() { processor = undefined; }, + async resolveId(source, importer, options) { + if (importer?.endsWith('.md') && source[0] !== '/') { + let resolved = await this.resolve(source, importer, options); + if (!resolved) resolved = await this.resolve('./' + source, importer, options); + return resolved; + } + }, // Why not the "transform" hook instead of "load" + readFile? // A: Vite transforms all "import.meta.env" references to their values before // passing to the transform hook. This lets us get the truly raw value @@ -85,8 +91,6 @@ export default function markdown({ settings, logger }: AstroPluginOptions): Plug for (const imagePath of rawImagePaths.values()) { imagePaths.push({ raw: imagePath, - resolved: - (await this.resolve(imagePath, id))?.id ?? path.join(path.dirname(id), imagePath), safeName: shorthash(imagePath), }); } diff --git a/packages/astro/test/fixtures/markdown/src/pages/houston.png b/packages/astro/test/fixtures/markdown/src/pages/houston.png Binary files differnew file mode 100644 index 000000000..345ed0e9d --- /dev/null +++ b/packages/astro/test/fixtures/markdown/src/pages/houston.png diff --git a/packages/astro/test/fixtures/markdown/src/pages/images.md b/packages/astro/test/fixtures/markdown/src/pages/images.md new file mode 100644 index 000000000..03fe00959 --- /dev/null +++ b/packages/astro/test/fixtures/markdown/src/pages/images.md @@ -0,0 +1,2 @@ + + diff --git a/packages/astro/test/fixtures/markdown/src/pages/relative/houston.png b/packages/astro/test/fixtures/markdown/src/pages/relative/houston.png Binary files differnew file mode 100644 index 000000000..345ed0e9d --- /dev/null +++ b/packages/astro/test/fixtures/markdown/src/pages/relative/houston.png diff --git a/packages/astro/test/markdown.test.js b/packages/astro/test/markdown.test.js index 654f9631d..589ae0522 100644 --- a/packages/astro/test/markdown.test.js +++ b/packages/astro/test/markdown.test.js @@ -65,7 +65,6 @@ describe('Markdown tests', () => { it('Can load a realworld markdown page with Astro', async () => { const html = await fixture.readFile('/realworld/index.html'); const $ = cheerio.load(html); - assert.equal($('pre').length, 7); }); @@ -73,5 +72,12 @@ describe('Markdown tests', () => { const html = await fixture.readFile('/entities/index.html'); assert.match(html, /<i>This should NOT be italic<\/i>/); }); + + it('Resolves the image paths correctly', async () => { + const html = await fixture.readFile('/images/index.html'); + const $ = cheerio.load(html); + assert.equal($('img').first().attr('src').includes('.webp'), true); + assert.equal($('img').first().next().attr('src').includes('.webp'), true); + }); }); }); |
