#Image component in react

4 messages · Page 1 of 1 (latest)

bleak palm
#

Hi, I don't get the image component provided by astro to work in a react component, is it supposed to work or does it only work in astro components

hybrid umbraBOT
#

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

#

Astro's <Image /> component is designed to work in .astro and .mdx files only. When you're working with a UI framework like React, you should use the framework's own image syntax to render an image. For React, this would be the standard JSX <img /> tag.

Here's an example of how you can use images in a React component:

import stars from "../assets/stars.png"
export default function ReactImage() { 
  return ( <img src={stars.src} alt="A starry night sky." /> )
}

In this example, the image is first imported to access its src property. Astro will not optimize these images, but you can install and use NPM packages for more flexibility.

It's important to note that the <Image /> component, like any other Astro component, is unavailable to UI framework components. However, you can pass the static content generated by <Image /> to a framework component inside a .astro file as children or using a named <slot/>.

Here's an example:

---import ReactComponent from './ReactComponent.jsx';import { Image } from "astro:assets"import stars from "~/stars/docline.png";---
<ReactComponent> <Image src={stars} alt="A starry night sky." /></ReactComponent>

In this example, the <Image /> component is used inside an Astro file and its output is passed to a React component.

For more information, you can refer to the Astro documentation on images (https://docs.astro.build/en/guides/images/) and migrating to Astro from other frameworks (https://docs.astro.build/en/guides/migrate-to-astro/).