I want to dynamic import images in div from client side script tags how to do that
#images
nimble mulch
flat lanceBOT
Hi @nimble mulch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To dynamically import images in Astro, you can use Vite’s import.meta.glob function. Here's an example of how you can do this:
---import type { ImageMetadata } from 'astro';import { Image } from 'astro:assets';
interface Props { imagePath: string; altText: string; name: string; age: number;}
const { imagePath, altText, name, age } = Astro.props;const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}');if (!images**imagePath]) throw new Error(`"${imagePath}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`);---<div class="card"> <h2>{name}</h2> <p>Age: {age}</p> <Image src={images[imagePath** ()} alt={altText} /></div>
In this example, images is an object that contains all of the image paths inside the assets folder. The imagePath prop is a string that contains the path to the image that you want to display. The import.meta.glob() is doing the work of finding the image path that matches the imagePath prop and handling the import for you.
However, please note that dynamic tags are not supported with hydration directives. When using client:* hydration directives, Astro needs to know which components to bundle for production, and the dynamic tag pattern prevents this from working.