So i try to make a Gallery with Astro and i hope someone can help me to grasp a few things.
I have a folder called "assets" in "src" in which all the images reside.
I also have a .astro file in "pages".
In this file i try to get the images with:
const images = import.meta.glob('/src/assets/*.{jpeg,jpg,png,gif}')
const resolvedImages = Object.entries(images)
in the body of the .astro i try to map "resolvedImages"
{resolvedImages.map((image) => (
<Image src={image[0]} alt="blabla" />
))}
Which kinda works but feels wrong.
That i have to write "image[0]" instead of "image.src" can't be the solution.
There seems to be something called "ImageMetadata " , which has all the things i would like to have access to (filepath, width, etc.). But i don`t understand how to use it.
When i try
const images = import.meta.glob<ImageMetadata>('/src/assets/*.{jpeg,jpg,png,gif}')
I still can´t access the values. What am i not understanding?
Also, is that even the right approach? There is also the option to define a collection and get that but the docs say those are just for markdown?
Thanks in advance.