Fix bare images used in JSON content collections

.changeset/neat-images-resolve.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes image path resolution in content layer collections to support bare filenames. The `image()` helper now normalizes bare filenames like `"cover.jpg"` to relative paths `"./cover.jpg"` for consistent resolution behavior between markdown frontmatter and JSON content collections.

packages/astro/src/content/utils.ts

@@ -184,8 +184,27 @@ export async function getEntryDataAndImages<
 			schema = schema({
 				image: () =>
 					z.string().transform((val) => {
-						imageImports.add(val);
-						return `${IMAGE_IMPORT_PREFIX}${val}`;
+						// Normalize bare filenames to relative paths for consistent resolution
+						// This ensures bare filenames like "cover.jpg" work the same way as in markdown frontmatter
+						// Skip normalization for:
+						// - Relative paths (./foo, ../foo)
+						// - Absolute paths (/foo)
+						// - URLs (http://...)
+						// - Aliases (~/, @/, etc.)
+						let normalizedPath = val;
+						if (
+							val &&
+							!val.startsWith('./') &&
+							!val.startsWith('../') &&
+							!val.startsWith('/') &&
+							!val.startsWith('~') &&
+							!val.startsWith('@') &&
+							!val.includes('://')
+						) {
+							normalizedPath = `./${val}`;
+						}
+						imageImports.add(normalizedPath);
+						return `${IMAGE_IMPORT_PREFIX}${normalizedPath}`;
 					}),
 			});
 		}

packages/astro/test/content-layer.test.js

@@ -281,6 +281,16 @@ describe('Content Layer', () => {
 			assert.ok(json.images[1].data.image.startsWith('https://'));
 		});
 
+		it('loads images with bare filenames in JSON', async () => {
+			assert.ok(json.rockets[0].data.image.src.startsWith('/_astro'));
+			assert.equal(json.rockets[0].data.image.format, 'jpg');
+		});
+
+		it('loads images with relative paths in JSON', async () => {
+			assert.ok(json.rockets[1].data.image.src.startsWith('/_astro'));
+			assert.equal(json.rockets[1].data.image.format, 'jpg');
+		});
+
 		it('renders images from frontmatter', async () => {
 			assert.ok($('img[alt="Lunar Module"]').attr('src').startsWith('/_astro'));
 		});

packages/astro/test/fixtures/content-layer/src/content.config.ts

@@ -253,6 +253,17 @@ const songs = defineCollection({
         }),
 });
 
+const rockets = defineCollection({
+	loader: file('src/data/rockets.json'),
+	schema: ({ image }) =>
+		z.object({
+			id: z.string(),
+			name: z.string(),
+			manufacturer: z.string(),
+			image: image(),
+		}),
+});
+
 export const collections = {
 	blog,
 	dogs,
@@ -270,6 +281,7 @@ export const collections = {
 	songs,
 	probes,
 	rodents,
+	rockets,
 	notADirectory,
 	nothingMatches
 };

packages/astro/test/fixtures/content-layer/src/data/rockets.json

@@ -0,0 +1,14 @@
+[
+  {
+    "id": "falcon-9",
+    "name": "Falcon 9",
+    "manufacturer": "SpaceX",
+    "image": "shuttle.jpg"
+  },
+  {
+    "id": "saturn-v",
+    "name": "Saturn V",
+    "manufacturer": "NASA",
+    "image": "./shuttle.jpg"
+  }
+]

packages/astro/test/fixtures/content-layer/src/pages/collections.json.js

@@ -34,7 +34,9 @@ export async function GET() {
 	const nestedJsonLoader = await getCollection('birds');
 
 	const csvLoader = await getCollection('plants');
-
+
+	const rockets = await getCollection('rockets');
+
 	const numbers = await getCollection('numbers');
 
 	const numbersYaml = await getCollection('numbersYaml');
@@ -55,7 +57,8 @@ export async function GET() {
 			numbers,
 			numbersYaml,
 			numbersToml,
-			images, 
+			images,
+			rockets,
 			probes,
 			yamlLoader,
 			tomlLoader,