Content Collections - Images errors

[wide canyon]

Hey, I am building my first Astro site and have just started to use Content Collections to build a “meet the family page” - each family member's associated data is managed in the YAML file in content. The associated data includes a bio image.

I am getting the following error:

Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received @images/member-1.jpeg.

The below code/config is correct per astro docs. Any help pointers will be appreciated.

content.ts

import { z, defineCollection } from "astro:content";

export const collections = {
 familymembers: defineCollection({
   type: "data",
   schema: ({ image }) =>
     z.object({
       name: z.string(),
       funName: z.string(),
       bio: z.string(),
       bioImage: image(),
     }),
 }),
};

Member-1.yaml

name: member-1
funName: member
bio: Help my name is ….
bioImage: "@images/member-1.jpeg"

Profile Pic Component (profile.astro)

---
import { Image } from "astro:assets";
import { getEntry, type CollectionEntry } from "astro:content";

type Props = {
    tjpMember: CollectionEntry<"familymembers">;
};

const { tjpMember } = Astro.props;
const { name, funName, bio, bioImage} = tjpMember.data;

console.log(bioImage)

---

<div class="flex mt-12">
   <div class=" flex items-center h-full ">
   <div class="bg-gradient-to-r from-stone-100 to-neutral-100 via-gray-100 shadow-xl shadow-gray-300 p-4 rounded-lg max-w-xs -rotate-2">
     <div class="relative">
       <!-- The photo -->
       <Image src={bioImage}
       height={600}
        width={600}
        alt=" "
       >
     </div>
   </div>
</div>

Folder Structure

src-->assets-->images
src-->components-->profile.astro
src-->content-->familymembers-->member-1.yaml
src-->content-->content.js

[tulip lake]

Have you tried importing the images directly?

Try this:

---
import { Image } from "astro:assets";
import { getEntry, type CollectionEntry } from "astro:content";

// FIX: Import your image directly
import member1Image from "../assets/images/member-1.jpeg";

type Props = {
    tjpMember: CollectionEntry<"familymembers">;
};

const { tjpMember } = Astro.props;
const { name, funName, bio } = tjpMember.data;
const bioImage = member1Image; // FIX: Set bioImage to the imported image
---

<div class="flex mt-12">
   <div class=" flex items-center h-full ">
   <div class="bg-gradient-to-r from-stone-100 to-neutral-100 via-gray-100 shadow-xl shadow-gray-300 p-4 rounded-lg max-w-xs -rotate-2">
     <div class="relative">
       <!-- The photo -->
       <Image src={bioImage}
       height={600}
        width={600}
        alt=" "
       >
     </div>
   </div>
</div>

Remove your bioImage field from your yaml:

name: member-1
funName: member
bio: Help my name is ….

[waxen rover]

the config file must be named config.ts not content.ts https://docs.astro.build/en/guides/content-collections/#defining-a-collection-schema

[wide canyon]

Thanks, but need the profile image to be dynamic - when I add member-2, member-3 etc. So not sure how the fix would support muliple member?

[wide canyon]

Thanks Lukas - updated as recommended. Still get the same error.

[tulip lake]

It wouldn't. Still scratching my head on how to do that.

[waxen rover]

Hmm, I'm not sure. I'm doing the exact same thing on my homepage. Would you be able to share a repository or a minimal reproduction so I can take another look?

[waxen rover]

You would use the image helper, like @wide canyon does https://docs.astro.build/en/guides/images/#images-in-content-collections

[wide canyon]

okay i've the found issue .. and have a work around:

The image is set to

bioImage: "@images/gareth.jpeg"

@images is a reference to setup in the tsconfig.json

"paths": {
  "@components/*": ["components/*"],
  "@layouts/*": ["layouts/*"],
  "@pages/*": ["pages/*"],
  "@images/*": ["assets/images/*"],
  "@styles/*": ["styles/*"],
  "@utils/*": ["utils/*"],
  "@config": ["config.ts"],
  "@types": ["types.ts"]
}

Workaround:

bioImage: "assets/images/gareth.jpeg"

[waxen rover]

Hmm, I was gonna suggest trying something like this, but I thought the error message doesn't fit

Your import paths are not set up correctly by the way. They are missing a wildcard, so for example "@components/": ["components/"] should be "@components/": ["components/*"]

if you fix this your path in the content collection should work as well

For reference the offical typescript docs on this https://www.typescriptlang.org/tsconfig/#paths

[wide canyon]

@waxen rover perfect - thank you so much 🙂

[waxen rover]

No worries 🙂

[torn zenith]

If your issue is resolved, please help by doing the following two steps:

1. From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
2. From the same ellipses, select Close Post.
   Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
   Thank you for your help!