pure notch
I'm having a problem using the <Image /> component together with the Collections.
Context
- macOS Ventura 13.6.1
- pnpm as package manager
- Chrome as the browser
- It works fine hosted on Vercel
- It does not work when I run
pnpm run dev
What's happening
The images only show in Production at the live site URL. They do not work in development.
What I did
I defined the collection as so:
const authors = defineCollection({
type: 'content',
schema: ({ image }) =>
z.object({
// other props…
image: image()
})
})
The images are in src/content/authors/image.jpeg, the same folder as the markdown files and used like this:
---
image: './image.jpeg'
---
I'm using it in the Component.astro files like this:
---
import { Image } from 'astro:assets'
import { getCollection } from 'astro:content'
const authors = await getCollection('authors')
---
<ul>
{authors.map((author) => (
<li>
{author.data.image && (
<Image
width={200}
height={200}
src={author.data.image}
alt={author.data.fullName} />
)}
</li>
))}
</ul>
dense minnow