fix: treat images with initial slash as local, and resolve with vite (#…

…12030)

* fix: allow images with absolute path

* Add mroe tests

* changeset

.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.

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

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, {

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)

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,