Reading props

[distant kestrel]

Hi, i have a component that putting an header image, on each page of my website, i pull an image into it, like this:
import image from 'src/assets/images/image.jpg';
<hero
image={{
src: image,
alt: 'Welcome msg!',
}}

in the hero component file;
how can i read that src value as url string outside of the component side?

[buoyant canopy]

Hey Umit 👋 You can use the getImage() utility to generate an optimized image outside of the <Image /> component. Once you have optimized the image you can access the src image, something like this: ```jsx

import { getImage } from "astro:assets";
import imagefrom "src/assets/images/image.jpg"

const optimized = await getImage({src: image, format: 'webp'})

// Get 'src' of image
console.log(optimized.src)

https://docs.astro.build/en/guides/images/#generating-images-with-getimage

[winter ice]

This looks nifty, Bryceguy, have never had to intercept it like this before since I use the <Image/> straight away... with this solution, even the vanilla old html img tag should be fine after the fact, huh?