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.