I'm working on a simple astro project that is structured like this:
└── src
├── assets
│ └── images
│ └── blend.webp
├── components
│ └── CoffeeCard.astro
├── content
│ ├── coffees
│ │ └── blend.md
│ └── config.ts
├── pages
│ └── index.astro
└── utils.ts
My blend.md file references the image like this:
image_src: "../../assets/images/blend.webp"
In my config.ts file, I configure the image as follows:
// 1. Import utilities from `astro:content`
import { z, defineCollection } from 'astro:content';
// 2. Define your collection(s)
const coffeeCollection = defineCollection({
schema: ({ image }) => z.object({
origin: z.string(),
title: z.string(),
price: z.number(),
image_src: image(),
image_alt: z.string(),
}),
});
// 3. Export a single `collections` object to register your collection(s)
// This key should match your collection directory name in "src/content"
export const collections = {
'coffee': coffeeCollection,
};
When I try to render the image in the CoffeeCard.astro file, I use the following code:
<Image src={import(image_src)} alt={image_alt} height={540} width={550}/>
I have tried various methods, with and without importing, but I always get an error saying the image cannot be found. Do you have any ideas on what I might be doing wrong? I suspect it has to do with trying to render the image from within the components folder, but I've tried many solutions without success.