Astro Trick- How to Import and Display all Images in a Directory

Astro Trick- How to Import and Display all Images in a Directory

The Astro framework is a front-end framework used for building fast, optimized websites and applications. It allows developers to use their preferred JavaScript framework, or none at all, while enabling the delivery of highly efficient, fast loading websites. The framework achieves this by only sending the necessary JavaScript to the browser, resulting in less time processing scripts, and thus faster load times.

Astro's use-cases

Astro is used for a variety of purposes, such as building static websites, creating dynamic web applications, and making SEO-friendly e-commerce sites. The flexibility of the framework allows developers to write components using their preferred JavaScript framework, or vanilla JavaScript, while the built-in performance optimizations of Astro ensure that the final product is extremely performant.

This makes it a popular choice among developers looking to build fast, modern web experiences.

How to display images in Astro from folders.

In the following snippet, you can see how we utilize Astro to display all images in one folder with few lines of code.

Load all images

---
const imageFiles = await Astro.glob("../assets/gallery/designs/*");
---

Display Images with a Lightbox

 {
          imageFiles.map((image, id) => (
            <>
              <Lightbox gallery={gallery} id={id} image={image} />
            </>
          ))
        }

---
import { Image } from "astro:assets";
import Site from "../site.config.json";
const { gallery, image, id } = Astro.props;
---

<a
  href={"#" + gallery + "-" + id}
  id={"i" + gallery + "-" + id}
  class={`row-span-3x ${
    id === 4 || id === 9 || id === 14 ? "col-span-2" : ""
  }`}>
  <Image
    src={image.default}
    width="480"
    alt={Site.title}
    class="galleryImagex w-full h-autox object-center object-cover h-72 transition-all hover:scale-125 bg-white duration-200 ease-in-out hover:shadow-2xl shadow-lg rounded-none"
  />
</a>
<a
  href={"#i" + gallery + "-" + id}
  class="hidden fixed h-full z-50 bg-black/75 transition-all target:block items-centerx w-full"
  id={gallery + "-" + id}>
  <Image
    src={image.default}
    width="680"
    alt={Site.title}
    class="galleryImage hidden w-full h-autox object-center object-cover h-64 transition-all hover:scale-125 bg-white duration-200 ease-in-out hover:shadow-2xl shadow-lg rounded-none"
  />
  <canvas
    class="watermark-canvas h-auto w-autox mt-20 lg:mt-0 lg:w-auto w-auto object-center object-cover mx-auto my-auto p-2x bg-slate-200 shadow-xl">
  </canvas>
</a>

<!-- is:inline -->
<!-- {{Site}} is used for loading configs -->
<script is:inline define:vars={{ Site }}>
  var wm = Site.watermarkText;
  var cusid_ele = document.getElementsByClassName("galleryImage");
  var image_canvas = document.getElementsByClassName("watermark-canvas");
  for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];
    var src = item.getAttribute("src");
    const image = new Image();
    const canvas = image_canvas[i];
    const ctx = canvas.getContext("2d");
    image.onload = () => {
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
      ctx.font = "30px verdana";
      ctx.shadowColor = "#999";
      ctx.shadowBlur = 10;
      ctx.lineWidth = 7;
      ctx.fillStyle = "white";
      ctx.strokeText(wm, 25, image.height - 45);
      ctx.fillText(wm, 25, image.height - 45);
    };
    image.src = src;
  }
</script>

The final Demo

I built this demo quickly to display images as a web gallery in no time.

Kuzey, The North
A demo Gallery for Astro Gallery

Best 25 Astro Landing Pages for SaaS Startups, Freelancers, and App Developers
Astro is a fantastic framework for developing interactive web apps, static sites, and content-centric websites. It’s perfect for creating portfolios, landing pages, blogs, CMS, and documentation. Astro allows developers to code using their preferred frameworks like React, Vue, Preact, or Svelte. Additionally, it supports server-side rendering and the creation of
Best 11 Open-source Astro Templates for Startups, Developers, and Agencies
Astro is a modern static site builder that allows you to build websites using any framework or none at all. It provides a developer-friendly experience by allowing you to use your favorite tools and libraries, such as React, Vue.js, or Svelte, while still delivering fast performance. What is Astro







Open-source Apps

9,500+

Medical Apps

500+

Lists

450+

Dev. Resources

900+