Typescript warning with Astro Assets `<Image>` component.

[muted lodge]

I get the following typescript warning when using the Astro Assets <Image> component.

Type '{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Type '{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & Simplify<RemoteImageProps<ImgAttributes>>'.ts(2322)

The use of the component is as follows:

<Image
      src={imgSrc}
      width={215}
      alt="The description."
    />

I have Astro assets enabled in my config file and the correct import from astro:assets so I'm unsure what the difference is with my assignemnt...

[crisp rune]

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

---

Based on the information provided in the extracts, the error you're encountering seems to be related to TypeScript type checking. The error message suggests that the object you're passing to the Image component doesn't match the expected type.

Astro's Image component from astro:assets expects certain properties. In the provided code, you're passing src, width, and alt properties. However, the error message suggests that there might be a mismatch between the types you're providing and the types the Image component expects.

The Image component requires the src attribute to be either an image that has been ESM imported or a string. This is also true for the first parameter of getImage(). The error usually happens when the value passed to src is undefined. Here is an example of how to use the Image component correctly:

---
import { Image } from "astro:assets";
import myImage from "../assets/my_image.png";
---

<Image src={myImage} alt="..." />
<Image src="<https://example.com/logo.png"> width={300} height={300} alt="..." />

(Source: Astro Documentation (https://docs.astro.build/en/reference/errors/expected-image#what-went-wrong))

If you're sure that the src attribute is correctly defined, the issue might be related to the width attribute. The extracts don't provide information about whether the width attribute is expected or what type it should be.

For more detailed help, you might want to check the Astro documentation or the TypeScript definitions for the Image component. If the issue persists, consider opening an issue on the Astro GitHub repository.

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

[fair veldt]

Assuming imgSrc to be a remote URL here, you're missing a height

[crisp rune]

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

[fair veldt]

(beep boop, I'm a robot)

[muted lodge]

Hey @fair veldt , the image is from my assets directory

imported like so:
import imgSrc from "@assets/image.png";

However, adding a height does get rid of the error. Do you know what's causing this?

[fair veldt]

I think your env.d.ts has the wrong values in it (should have /// <reference types="astro/client-image" />)

Have you ran Astro after adding experimental assets?

It should update it for you normally

[muted lodge]

Yep I have that line in my env.d.ts

[fair veldt]

Hmm, if restarting your editor doesn't fix it, you might have a dependency that's messing with the types

[muted lodge]

Yeah I've even tried restarting, I'll try a couple other things

[fair veldt]

I know there used to be an issue with a old version of astro-icon where it would mess with the types

Otherwise, do you have anything special in your tsconfig.json maybe?

[muted lodge]

I do have astro-icon installed

tsconfig is pretty basic

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"],
      "@config/*": ["src/config/*"]
    }
  }
}

It's weird because I used to run Astro assets no problem with a very similar set up

After running npm remove astro-icon the ts error is gone

So you were right that was cuasing it, now it's just figuring out how I can have both in the project!