Problem Description

I am unable to use images located in the public directory to set the cover image for individual Astro posts.

Official Documentation: https://docs.astro.build/en/guides/images/#images-in-content-collections

The syntax shown below throws an error, indicating that the resource cannot be found.

However, if I use images located in the src directory instead, they display correctly locally; yet, as soon as the site is deployed to Cloudflare, those images also fail to load.

heroImage: '/images/helloblog/Snipaste_2026-04-22_16-50-29.jpg'

Solution

Modify the heroImage configuration setting within the src/content.config.ts file.

Here is my configuration:

The previous configuration—heroImage: z.optional(image()),—prevented the correct usage of images located in both the public and src directories. I changed it to heroImage: z.string().optional(),, which now allows me to directly reference images using simple string paths.

This also resolves the issue of duplicating the same image across two separate folders—thereby wasting storage space—by allowing me to store all images exclusively within the public directory.

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const blog = defineCollection({
	// Load Markdown and MDX files in the `src/content/blog/` directory.
	loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
	// Type-check frontmatter using a schema
	schema: ({ image }) =>
		z.object({
			title: z.string(),
			description: z.string(),
			// Transform string to Date object
			pubDate: z.coerce.date(),
			updatedDate: z.coerce.date().optional(),
			// heroImage: z.optional(image()),
			heroImage: z.string().optional(),
		}),
});

export const collections = { blog };

Card Sharing

After publishing this post, I plan to test how the card sharing feature renders on X once again.