#Error passing img source prop.

12 messages · Page 1 of 1 (latest)

hidden dust
#

I'm getting the following error.

Expected src property for getImage or <Image /> to be either an ESM imported image or a string with the path of a remote image. Received undefined (type: undefined).

Full serialized options received: {"width":750,"height":422,"format":"webp","alt":"foritude","class":"w-full mb-6"}.

This is the code associated with it...

import { type TermsSchema } from "../content/config";
import BaseLayout from "./BaseLayout.astro";
import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat";
import { Image } from "astro:assets";

export interface Props extends TermsSchema {}

const {
  title,
  pubDate,
  updatedDate,
  appIcon
} = Astro.props;

dayjs.extend(localizedFormat);
const displayDate = dayjs(pubDate).format("ll");
---

<BaseLayout title={title}, ogType="term">
  <main class="md:flex md:justify-center">
    <article class="prose prose-lg max-w-[750px] prose-img:mx-auto">
      <h1 class="title my-2 text-4xl font-bold">{title}</h1>
      <h4>Terms of Service</h4>
      <Image width={750} height={422} format="webp" src={appIcon} alt={title} class="w-full mb-6" />

      {pubDate && <time>{displayDate}</time>}
      <br />
      {
        updatedDate && (
          <div>
            {" "}
            Last updated on {displayDate}
          </div>
        )
      }
      <div class="divider my-2"></div>
      <slot />
    </article>
  </main>
</BaseLayout>
silent skyBOT
#

Hi @hidden dust. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message you're seeing is indicating that the src property for the Image component or getImage function is expected to be either an ESM imported image or a string with the path of a remote image. However, it received undefined. This usually happens when the value passed to src is undefined (source (https://docs.astro.build/en/reference/errors/expected-image#_top)).

In your code, you're passing appIcon as the src for the Image component. If appIcon is undefined, you'll encounter this error.

If appIcon is a local image in your src/ directory, you need to import it into your file before using it. Here's an example of how to do this:

---import { Image } from 'astro:assets';import appIcon from '../assets/my-local-image.png';---
<Image src={appIcon} alt="descriptive text" />

If appIcon is an image in your public/ directory, you can use the image’s file path relative to the public folder:

---import { Image } from 'astro:assets';---
<Image src="/images/my-public-image.png" alt="descriptive text" width="200" height="150"/>

If appIcon is a remote image, you can use the image’s full URL as the property value:

---import { Image } from 'astro:assets';---
<Image src="<https://example.com/remote-image.jpg"> alt="descriptive text" width="200" height="150" />

You can find more information about this in the Astro documentation on Images (https://docs.astro.build/en/guides/images#src-required).

#

If appIcon is coming from the frontmatter of a markdown file, you might be encountering a known issue where the Image component from astro:assets doesn't work correctly when the src is taken from frontmatter (source (https://github.com/withastro/astro/issues/6880)). In this case, you might need to use the image() schema from Content Collections as suggested in the Github issue.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@hidden dust kapa.ai is still learning and improving, please let us know how it did by reacting below

hidden dust
#

@silent sky it is from the schema of a collection object.

silent skyBOT
#

Let me check the knowledge base for you. One moment! :books:

#

If the appIcon is coming from the schema of a collection object, it's likely that the value is not being correctly passed to the Image component.

In Astro, when you're working with Content Collections, the data from your markdown files (including frontmatter) is made available to your components through Astro.props.

In your case, you're destructuring appIcon from Astro.props:

const {
  title,
  pubDate,
  updatedDate,
  appIcon
} = Astro.props;

This means that appIcon should contain the value from your markdown file's frontmatter. If appIcon is undefined, it's possible that the value is not being correctly set in your markdown file or there's an issue with how the data is being loaded.

Here are a few things you can check:

  1. Ensure that the appIcon field is correctly set in your markdown file's frontmatter. The value should be a string with the path to the image file (either a local path relative to the markdown file or a full URL for a remote image).

  2. Check your collection's configuration in src/content/config.ts. Make sure that the appIcon field is included in the schema for your collection.

  3. Try logging Astro.props to the console to see what data is being passed to your component. This can help you identify if there's an issue with how the data is being loaded.

If you're still encountering issues, it might be helpful to open an issue on the Astro Github (https://astro.build/issues/) as suggested in the Astro documentation (https://docs.astro.build/en/reference/errors/unknown-content-collection-error#what-went-wrong).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@hidden dust kapa.ai is still learning and improving, please let us know how it did by reacting below

hidden dust
#

@silent sky This is what that frontmatter looks like....

---
title: "Test"
pubDate: "April 1, 2024"
appIcon: "/site-placeholder/fortitude/fortitude.png"
---
silent skyBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the frontmatter you've provided, it seems like appIcon is a path to an image in your public directory.

In Astro, you can directly use the path to the image in your Image component without needing to import it. Here's how you can do it:

<Image width={{750}} height={{422}} format="webp" src={Astro.props.appIcon} alt={Astro.props.title} class="w-full mb-6" />

In this case, Astro.props.appIcon should resolve to the string "/site-placeholder/fortitude/fortitude.png", which is the path to your image.

If you're still encountering issues, it might be helpful to open an issue on the Astro Github (https://astro.build/issues/) as suggested in the Astro documentation (https://docs.astro.build/en/reference/errors/unknown-content-collection-error#what-went-wrong).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: