When I created the page to showcase all the pizza Ive baked I had to load over 40 images. Importing them manually and displaying in an <Image> component quickly became tedious. There had to be a quicker way. And there was; the Astro.glob() function! The code below shows how to load all files inside a directory (make sure it only contains images, or edit the glob string pattern to your needs) and loop over them to render each inside a <Image> component. Tailwind classes are used to show the images in a Pinterest-like fashion. It is as easy as that! Give me a reaction to the right if this was helpful! If you appreciate my work, please consider buying me a coffee. Another way to support me is by using my Digitalocean referral link to sign up for Digitalocean. You will get $200 in credit for free. © 2024 Axel Larsson Made with ❤️ in Sweden
