#Typescript error: Image component requires height prop when using a local resource

2 messages · Page 1 of 1 (latest)

steep rockBOT
#

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

#

According to the Astro documentation (https://docs.astro.build/en/guides/images/), when using local images in their original aspect ratio, the width and height can be automatically inferred from the source file and are optional. However, these properties are required for remote images and images stored in your public/ folder as Astro is unable to analyze these files.

If you're using a local image and still getting a TypeScript error, it might be due to a misconfiguration or a bug. If the image is in your public/ folder, you should specify the width and height properties.

Here's an example of how to use the Image component with a local image:

---// import the Image component and the imageimport { Image } from 'astro:assets';import myImage from "../assets/my_image.png"; // Image is 1600x900---
<!-- `alt` is mandatory on the Image component --><Image src={myImage} alt="A description of my image." />

If the issue persists, consider checking the Astro GitHub issues (https://github.com/withastro/astro/issues) for similar problems or open a new issue to get help from the Astro community.

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