diff --git a/.changeset/sixty-oranges-walk.md b/.changeset/sixty-oranges-walk.md new file mode 100644 index 000000000000..ef3e14a7eb98 --- /dev/null +++ b/.changeset/sixty-oranges-walk.md @@ -0,0 +1,7 @@ +--- +'astro': patch +--- + +Resolves image paths in content layer with initial slash as project-relative + +When using the `image()` schema helper, previously paths with an initial slash were treated as public URLs. This was to match the behavior of markdown images. However this is a change from before, where paths with an initial slash were treated as project-relative. This change restores the previous behavior, so that paths with an initial slash are treated as project-relative. diff --git a/packages/astro/src/assets/utils/resolveImports.ts b/packages/astro/src/assets/utils/resolveImports.ts index 6dd6d1fdb4cf..53cd69f0addc 100644 --- a/packages/astro/src/assets/utils/resolveImports.ts +++ b/packages/astro/src/assets/utils/resolveImports.ts @@ -16,7 +16,7 @@ export function imageSrcToImportId(imageSrc: string, filePath?: string): string imageSrc = removeBase(imageSrc, IMAGE_IMPORT_PREFIX); // We only care about local imports - if (isRemotePath(imageSrc) || imageSrc.startsWith('/')) { + if (isRemotePath(imageSrc)) { return; } // We only care about images diff --git a/packages/astro/test/content-layer.test.js b/packages/astro/test/content-layer.test.js index 6b833085df86..6fceaec44f46 100644 --- a/packages/astro/test/content-layer.test.js +++ b/packages/astro/test/content-layer.test.js @@ -4,6 +4,7 @@ import { sep } from 'node:path'; import { sep as posixSep } from 'node:path/posix'; import { after, before, describe, it } from 'node:test'; import * as devalue from 'devalue'; +import * as cheerio from 'cheerio'; import { loadFixture } from './test-utils.js'; describe('Content Layer', () => { @@ -16,13 +17,16 @@ describe('Content Layer', () => { describe('Build', () => { let json; + let $; before(async () => { fixture = await loadFixture({ root: './fixtures/content-layer/' }); await fs .unlink(new URL('./node_modules/.astro/data-store.json', fixture.config.root)) .catch(() => {}); - await fixture.build(); + await fixture.build({ force: true }); const rawJson = await fixture.readFile('/collections.json'); + const html = await fixture.readFile('/spacecraft/lunar-module/index.html'); + $ = cheerio.load(html); json = devalue.parse(rawJson); }); @@ -149,11 +153,28 @@ describe('Content Layer', () => { assert.equal(json.images[0].data.image.format, 'jpg'); }); + it('loads images with absolute paths', async () => { + assert.ok(json.entryWithImagePath.data.heroImage.src.startsWith('/_astro')); + assert.equal(json.entryWithImagePath.data.heroImage.format, 'jpg'); + }); + it('handles remote images in custom loaders', async () => { console.log(json.images[1].data.image); assert.ok(json.images[1].data.image.startsWith('https://')); }); + it('renders images from frontmatter', async () => { + assert.ok($('img[alt="Lunar Module"]').attr('src').startsWith('/_astro')); + }); + + it('displays public images unchanged', async () => { + assert.equal($('img[alt="buzz"]').attr('src'), "/buzz.jpg"); + }); + + it('renders local images', async () => { + assert.ok($('img[alt="shuttle"]').attr('src').startsWith('/_astro')); + }); + it('returns a referenced entry', async () => { assert.ok(json.hasOwnProperty('referencedEntry')); assert.deepEqual(json.referencedEntry, { diff --git a/packages/astro/test/fixtures/content-layer/content/space/lunar-module.md b/packages/astro/test/fixtures/content-layer/content/space/lunar-module.md new file mode 100644 index 000000000000..780106de4409 --- /dev/null +++ b/packages/astro/test/fixtures/content-layer/content/space/lunar-module.md @@ -0,0 +1,15 @@ +--- +title: Lunar Module +description: 'Learn about the Lunar Module.' +publishedDate: '2024-09-19' +tags: [space, 60s] +heroImage: "/images/lunar-module.jpg" +--- + +**Source:** [Wikipedia](https://en.wikipedia.org/wiki/Apollo_Lunar_Module) + +The Lunar Module (LM, pronounced "Lem"), originally designated the Lunar Excursion Module (LEM), was the lander spacecraft that was flown between lunar orbit and the Moon's surface during the U.S. Apollo program. It was the first crewed spacecraft to operate exclusively in the airless vacuum of space, and remains the only crewed vehicle to land anywhere beyond Earth. + +![buzz](/buzz.jpg) + +![shuttle](shuttle.jpg) diff --git a/packages/astro/test/fixtures/content-layer/images/lunar-module.jpg b/packages/astro/test/fixtures/content-layer/images/lunar-module.jpg new file mode 100644 index 000000000000..9b8cee764271 Binary files /dev/null and b/packages/astro/test/fixtures/content-layer/images/lunar-module.jpg differ diff --git a/packages/astro/test/fixtures/content-layer/public/buzz.jpg b/packages/astro/test/fixtures/content-layer/public/buzz.jpg new file mode 100644 index 000000000000..34c544bb7e4d Binary files /dev/null and b/packages/astro/test/fixtures/content-layer/public/buzz.jpg differ diff --git a/packages/astro/test/fixtures/content-layer/src/pages/collections.json.js b/packages/astro/test/fixtures/content-layer/src/pages/collections.json.js index 572998b4fd99..aea8bfc9ad8b 100644 --- a/packages/astro/test/fixtures/content-layer/src/pages/collections.json.js +++ b/packages/astro/test/fixtures/content-layer/src/pages/collections.json.js @@ -14,6 +14,8 @@ export async function GET() { const entryWithReference = await getEntry('spacecraft', 'columbia-copy'); const referencedEntry = await getEntry(entryWithReference.data.cat); + const entryWithImagePath = await getEntry('spacecraft', 'lunar-module'); + const increment = await getEntry('increment', 'value'); const images = await getCollection('images'); @@ -26,6 +28,7 @@ export async function GET() { dataEntry, simpleLoader, entryWithReference, + entryWithImagePath, referencedEntry, increment, images,