@astrojs/image with JSX

[outbackStack]

Is it possible to use astro <Image> component with JSX? I can see the example in the doc for .astro file but not sure how to use in a Solidjs file.

Astro File - example from docs

---
import { Image } from '@astrojs/image/components';
import heroImage from '../assets/hero.png';
---

// optimized image, keeping the original width, height, and image format
<Image src={heroImage} />

Solidjs File - got an error saying it can't locate the @astrojs/image/components

import { Image } from '@astrojs/image/components';
import heroImage from '../assets/hero.png';

export function HeroComponent() {
  return (
    <Image src={heroImage} />
  );
}

[delucis]

Hi @outbackStack — no the image component is a .astro component so can only be used inside other .astro components, I’m afraid.

Do come join us on Discord if you’re looking for more support! https://astro.build/chat

[outbackStack]

Cool thanks @delucis

[ArmandPhilippot]

We're closing stale and outdated discussion to keep only the discussions still relevant to the current project version and/or the current docs state.

I'm closing this as it seems resolved and we now have a section about this in docs.

If you think this is a mistake and that this discussion should remain open, please feel free to ping me, I'll take a second look at it.

Thank your for your contribution!