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

* fix: allow images with absolute path

* Add mroe tests

* changeset

7 files changed, 48 insertions, 2 deletions

diff --git a/.changeset/sixty-oranges-walk.md b/.changeset/sixty-oranges-walk.md
new file mode 100644
index 000000000..ef3e14a7e
--- /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 6dd6d1fdb..53cd69f0a 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 6b833085d..6fceaec44 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 000000000..780106de4
--- /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 000000000..9b8cee764
--- /dev/null
+++ b/packages/astro/test/fixtures/content-layer/images/lunar-module.jpg
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 000000000..34c544bb7
--- /dev/null
+++ b/packages/astro/test/fixtures/content-layer/public/buzz.jpg
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 572998b4f..aea8bfc9a 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,