Issue with some Images getting resolved, while others aren't resolved

[iron knoll]

I'm having an issue with my front matter image not getting processed. I have several collections; one is working to process the image, but the other is not. I don't know what I'm doing wrong, but I have verified:

• the path is correct
• I'm using the image helper in the schema correctly
• I have checked spelling over 40 times at this point
• If I put the image in public folder and reference via image: /my-image it works fine.
• I've changed my .mdx file to .md (since the one that's working is plain ol' markdown) but that didn't do it.

I even put:

image: image().transform((image, ctx) => {
  debugger;
  console.log(image);
}),

In my schema for the working and non-working image. The debugger gets hit after runtime-assets.js is called in the working one, but in the non-working collection, it never gets hit. It seems to always treat it as a string. I have commented out the whole image: section of the schema and I still get the same error I awlays get:

15:59:08 [ERROR] [LocalImageUsedWrongly] Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received @images/projects/goals/my-image.png.
Hint:
If you want to use an image from your src folder, you need to either import it or if the image is coming from a content collection, use the image() schema helper https://docs.astro.build/en/guides/images/#images-in-content-collections. See https://docs.astro.build/en/guides/images/#src-required for more information on the src property.
Error reference:
https://docs.astro.build/en/reference/errors/local-image-used-wrongly/
Stack trace:
...

Here's the two schemas I was talking about, truncated for brevity:

import { defineCollection, reference, z } from 'astro:content';

//...

const postCollection = defineCollection({
  type: 'content',
  schema: ({ image }) =>
    z.object({
      //... truncated
      // can use .refine to enforce width/height requirements
      // https://docs.astro.build/en/guides/images/#images-in-content-collections
      image: image().optional(),
      imageAlt: z.string().optional().transform((image, ctx) => {
        debugger; // <--- gets hit when looking at post collection
        console.log(image);
      }),
      technologyUsed: z.array(reference('technology-used')).optional(),
    }),
});

//...

const caseStudyCollection = defineCollection({
  type: 'content',
  schema: ({ image }) =>
    z.object({
      //... truncated
      // can use .refine to enforce width/height requirements
      // https://docs.astro.build/en/guides/images/#images-in-content-collections
      image: image().transform((image, ctx) => {
        debugger; // <--- never gets hit when looking at case study collection
        console.log(image);
      }),
      imageAlt: z.string(),
      featured: z.discriminatedUnion('isFeatured', [
        z.object({
          isFeatured: z.literal(true),
          featuredImages: z.array(image()).max(3).optional(),
          featuredImagesAlt: z.array(z.string()),
        }),
        z.object({
          isFeatured: z.literal(false),
        }),
      ]),
      //... truncated
    }),
});

//...

export const collections = {
  post: postCollection,
  //...
  caseStudy: caseStudyCollection,
  //...
};

postCollection works just fine:

---
image: ../../assets/path/to/image.gif
---

If I do the exact same image in the caseStudyCollection:

---
image: ../../assets/path/to/image.gif
---

Then I get the quoted error. Everything I have tried for caseStudyCollection has not encouraged the image service to process the string as an image.

Folder structure looks like this:

src/assets/images/
  image.gif
  my-image.png
src/content
  case-study/
    goals.mdx <-- doesn't work
  post/
    post.md <-- works

src/content/case-study/goals.mdx - doesn't work. If I use ../../assets/images/image.gif in the frontmatter it doesn't work for this one.
src/content/post/post.md - works. If I use ../../assets/images/image.gif in the frontmatter it works.

I am running astro: 4.15.6 and @astrojs/mdx: 3.1.6 just updated, but cannot be sure if this problem existed before the update. I would assume not, since I created a fresh project and tried using it as shown, in my schemas and it worked fine.

Makes no difference if I reference the image as ./my-image.png or through an alias, or relative path. However, if I do a dynamic import, using the resultant string from image image: '@images/my-image.png or ../../images/my-image.png I get a module not found error.

I have put a break point inside the component that renders the image, and it's always a string... that's the strongest lead I've got. I can't figure out why the image service isn't creating an ESMImportedImage from it.

I've been doing battle with this for many hours now, so I thought it was time to hop on here to see what I'm doing wrong.

Oh, and I've also tried converting from Image to <img> but I get a 404 (http://localhost:4321/assets/images/my-image.png) from <img> unless I put it in the public folder and reference it from the root in the markdown (e.g, /my-image.png) then it'll resolve.

[iron knoll]

Here's an example when using a breakpoint of a working one, and a non-working one. I don't know what to try next, so any thoughts are welcomed. 🙂 Thank you!

[iron knoll]

Another interesting development:

I renamed the directory under src/content from case-study to case-study-BAK until I restarted the dev server, I was still getting data. Once the server was restarted, I was getting [] for the data.

The one that is working is called the post collection. So, after the data was cleared for case-study, I commented out the zod definition I'd been using in my content configuration. Then, I copied/pasted the post collection's zod, named it caseStudyCollection, and exported it. I created an empty folder called case-study and copied one of the post's md files into the newly created case-study folder. I'm still seeing the same behavior.

I'm baffled, y'all. I even went as deep as putting breakpoints in node_modules/astro/dist/content/runtime-assets.js, which is the image() helper source, as far as I can tell. The post entries go there every time, but I don't ever see any other images hitting that code. I can clearly see the image helper in my zod configuration, so is there some file system caching that might be polluting this? I've deleted node_modules and .astro countless times, which didn't help. Maybe it's time for a fresh clone...

[iron knoll]

I discovered I've got a data collection doing the same thing now:

{
  "$schema": "../../../.astro/collections/technologyUsed.schema.json",
  "displayName": "vite",
  "logo": "../../assets/images/technology/vite.svg",
  "logoAlt": "The logo of an icon representing a programming language, designing, or development tool called vite",
  "firstUsed": "2022-01-01"
}

const technologyUsedCollection = defineCollection({
  type: 'data',
  schema: ({ image }) =>
    z.object({
      displayName: z.string(),
      logo: image(),
      logoAlt: z.string(),
      firstUsed: z.date(),
    }),
});

I've got two collections that can resolve images and two collections that don't resolve images.

[iron knoll]

When I paste my collections, config, and assets into a newly generated astro project, I get the same results. It must be something with my config, right? If it was in a bad state it would've been resolved in the fresh project. Does anyone know what might be the issue?

Issue with Some Images getting resolved, while others aren't resolved

Issue with some Images getting resolved, while others aren't resolved

[iron knoll]

Something interesting, since postCollection is working, I copy/pasted that schema under caseStudy expecting a bunch of schema validation errors, and I got no errors, but when I use astro dev --verbose I can see it detects my case-study collection, but somehow it's not validating it?

import { defineCollection, reference, z, type ImageFunction } from 'astro:content';

const postCollection = defineCollection({
  type: 'content',
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      isDraft: z.boolean(),
      featured: z.discriminatedUnion('isFeatured', [
        z.object({
          isFeatured: z.literal(true),
          featuredImage: image(),
          featuredImageAlt: z.string(),
        }),
        z.object({
          isFeatured: z.literal(false),
        }),
      ]),
      publishDate: z.date(),
      authors: z.array(reference('author')),
      categories: z.array(reference('post-category')),
      tags: z.array(reference('tag')),
      shortDescription: z.string(),
      // can use .refine to enforce width/height requirements
      // https://docs.astro.build/en/guides/images/#images-in-content-collections
      image: image().optional(),
      imageAlt: z.string().optional(),
    }),
});

const caseStudyCollection = defineCollection({
  type: 'content',
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      publishDate: z.date(),
      isDraft: z.boolean(),
      featured: z.discriminatedUnion('isFeatured', [
        z.object({
          isFeatured: z.literal(true),
          featuredImages: z.array(image()).max(3).optional(),
          featuredImagesAlt: z.array(z.string()),
        }),
        z.object({
          isFeatured: z.literal(false),
        }),
      ]),
      // can use .refine to enforce width/height requirements
      // https://docs.astro.build/en/guides/images/#images-in-content-collections
      image: image(),
      imageAlt: z.string(),
    }),
});

export const collections = {
  post: postCollection,
  caseStudy: postCollection,
};

[cinder scroll]

You incorrectly named your content collection.
If your collection is here:
src/content/case-study/
then you collection name should be:
"case-study": caseStudyCollection

[iron knoll]

Thank you for the reply! I’ve been racking my brain, but didn’t think of that one. Come to think of it, all my one word collections are working just fine. I’ll take a look at this tomorrow AM and mark as solved if it works. Thanks again for the insight. 😊

[iron knoll]

Wow, that was it. Thank you so much! I'm now getting a bunch of frontmatter errors because it's detecting the schemas properly. My schema now looks like this:

export const collections = {
  post: postCollection,
  'post-category': blogCategoryCollection,
  author: authorCollection,
  tag: tagCollection,
  recommendation: recommendationCollection,
  'case-study': caseStudyCollection,
  'case-study-category': caseStudyCategoryCollection,
  'technology-used': technologyUsedCollection,
};