Manipulate URL of assets

[crude minnow]

Hey there 👋
I'm trying to get this to work, but it's been difficult. I want to inject images somehow into a page (so like this file.md > component.astro > page.astro) where i'm doing this in the component.astro:

---
const { articleFolder } = Astro.props;
import { Image } from 'astro:assets';
import myImage from `../pages/${articleFolder}/my_image.png`;
---
<Image src={myImage} />

Which doesn't put the image into optimization.
Or like this:

const { articleFolder } = Astro.props;
import { getImage } from "astro:assets";
import myImage from `../pages/${articleFolder}/my_image.png`
const optimizedImage = await getImage({src: myImage, format: 'avif'})
---
<img src={optimizedImage.src} />

Which only accepts string so i'm not even sure if doing this part right with getImage()...

Is this even possible or somehow near the desired output and i'm just missing something obvious? Any ideas on how to accomplish this?

[spark seal]

Hi @crude minnow. 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, it seems like you're on the right track with using the astro:assets module and the <Image /> component for image optimization in Astro. However, there are a few things to note:

1. The alt attribute is mandatory for the <Image /> component. If it's not provided, the component will throw an error. So, you should always include an alt attribute when using the <Image /> component. For example:

<Image src={myImage} alt="A description of my image." />

Source (https://docs.astro.build/en/guides/assets#image--astroassets)

2. The getImage() function is used to optimize an image in your project on-demand, without using the <Image /> component. However, the extracts do not provide specific examples of how to use this function with dynamic paths.

3. The astro:assets module is experimental and will be enabled by default in [email protected]. If you're using a version of Astro prior to v3.0, you may need to enable the experimental flag to use assets. Source (https://docs.astro.build/en/guides/images)

4. The @astrojs/image integration will no longer be actively supported in Astro v3.0. It's recommended to use the astro:assets module instead. Source (https://docs.astro.build/en/guides/images#astros-image-integration)

5. If you're using .mdx files, you can use standard Markdown !**** () syntax or JSX <img /> tags to display images. Source (https://docs.astro.build/en/guides/images#in-mdx-files)

Unfortunately, the extracts do not provide specific information on how to use dynamic paths with the astro:assets module or the <Image /> component. For more detailed guidance, you may want to refer to the Astro documentation (https://docs.astro.build).

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