#Image Component weirdness

14 messages · Page 1 of 1 (latest)

static wigeon
#

import { getCollection } from "astro:content";
import { Image } from "astro:assets";
import BaseLayout from "@layouts/BaseLayout.astro";
import type { CollectionEntry } from "astro:content";
const myBooks: CollectionEntry<"books">[] = await getCollection("books");

<BaseLayout>
{
myBooks.map((book) => (
<section>
<div class="h-full rounded-3xl bg-lightblue-950 p-8">
<div class="mt-8">
<Image src={book.data.bookInfo.cover.image} alt={book.data.bookInfo.cover.alt} />
<br />
{book.data.bookInfo.cover.image}
</div>
</div>
</div>
</div>
</section>
))
}
</BaseLayout>

I am being told [LocalImageUsedWrongly] Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath. Received ./BookCover.jpg. That is the path in the frontmatter. Image is in the content folder.

charred crystalBOT
#

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

#

The error you're encountering, LocalImageUsedWrongly, is because the src parameter of the Image component in Astro must be either an imported image or a URL. It cannot be a string of a filepath. This is a requirement when using the default image services in Astro.

In your case, you're trying to use a local image from a content collection. For such cases, you can use the image() schema helper to resolve the images. Here's an example of how you can do it:

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

const bookCollection = defineCollection({
  schema: ({ image }) => z.object({
    title: z.string(),
    cover: image().refine((img) => img.width >= 1080, {
      message: "Cover image must be at least 1080 pixels wide!",
    }),
    coverAlt: z.string(),
  }),
});

export const collections = {
  books: bookCollection,
};

In the above example, the image helper for the content collections schema lets you validate the image metadata using Zod. The image will be imported and transformed into metadata, allowing you to pass it as a src to <Image/>, <img>, or getImage().

You can find more details about this in the Astro documentation (https://docs.astro.build/en/guides/images/#images-in-content-collections).

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

#

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

static wigeon
#

@charred crystal My schema looks like this:

const publishedBookCollection = defineCollection({
type: "content",
schema: ({ image }) =>
z.object({
title: z.string(),
draft: z.boolean(),
pubDate: z
.date()
.transform((str) => new Date(str))
.optional(),
bookInfo: z.object({
preorder: z.boolean(),
published: z.boolean(),
purchaseLink: z.string().url().optional(),
datePublished: z
.date()
.transform((str) => new Date(str))
.optional(),
cover: z.object({
image: image().refine((img) => img.width >= 300, {
message: "Cover image must be at least 300 pixels wide!",
}),
alt: z.string(),
}),
genres: z.array(z.string().toLowerCase()),
excerpt: z.string(),
}),
}),
});

And I get the [LocalImageUsedWrongly] Image's and getImage's src parameter must be an imported image or an URL, it cannot be a string filepath.

charred crystalBOT
#

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

#

Your schema looks correct and it should work as expected. The image().refine() function is correctly used to import the image and ensure it's at least 300 pixels wide.

The error message you're seeing, LocalImageUsedWrongly, typically occurs when you're trying to use a local image's filepath as a string directly in the src attribute of the Image component or getImage function. However, in Astro, you need to import the image first, then use the imported image object or a URL in the src attribute.

In your case, you're using the image from a content collection, and you're correctly using the image() schema helper to import and validate the image. So, you should be able to use book.data.bookInfo.cover.image directly in the src attribute of the Image component.

If you're still seeing the error, it might be due to some other part of your code. Please double-check your code to ensure you're not using a string filepath anywhere in the src attribute of the Image component or getImage function.

For more information, you can refer to the Astro documentation (https://docs.astro.build/en/guides/images/#images-in-content-collections).

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

#

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

static wigeon
#

@charred crystal Are there any known issues with the Image component?

charred crystalBOT
#

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

#

There are no known issues with the Image component in Astro as per the provided knowledge sources. However, there are certain requirements and best practices to follow when using it:

  1. The src attribute of the Image component must be either an ESM imported image or a URL. It cannot be a string filepath (source (https://docs.astro.build/en/reference/errors/local-image-used-wrongly/#_top)).

  2. The alt attribute is mandatory for the Image component to provide descriptive alt text for screen readers and other assistive technologies (source (https://docs.astro.build/en/reference/errors/image-missing-alt/#_top)).

  3. For remote images, both width and height attributes are required to avoid cumulative layout shift (CLS). If these attributes are not specified, you can set inferSize to true to fetch a remote image’s original dimensions (source (https://docs.astro.build/en/reference/errors/missing-image-dimension/#_top)).

  4. The Image component cannot be used directly in Markdoc. However, you can configure an Astro component to override the default image node every time the native !**** () image syntax is used, or as a custom Markdoc tag to allow you to specify additional image attributes (source (https://docs.astro.build/en/guides/integrations-guide/markdoc/#custom-image-components)).

  5. If you're using a strict package manager like pnpm, Sharp (the default image service used for astro:assets) must be installed manually into your project in order to use image processing (source (https://docs.astro.build/en/reference/errors/missing-sharp/#_top)).

#

If you're encountering any issues with the Image component, it's likely due to not following these requirements or best practices. If you're still facing issues, it might be a good idea to check the Astro documentation (https://docs.astro.build/) or seek help from the Astro community.

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

#

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

mild raptor
#

@static wigeon were you able to resolve this? Running into the same issue