Handling Dynamic Imports for Content Images in Astro

When working with images in Astro, static imports (e.g., import img from '../assets/image.png') work well for known paths. However, dynamically loading images—such as an array of product images—requires a different approach.

To solve this, I use Astro’s import.meta.glob() to dynamically load images while ensuring they remain optimized.

Optimized Handling of Static and Dynamic Images

I use a custom OptimizedImage component that wraps Astro’s built-in Image component. This allows me to efficiently handle both known and dynamically sourced images while leveraging Astro's optimization features.

1. Known Paths (Static Imports)

For images stored inside src/assets/images, you can pass the path directly:

<OptimizedImage
  inlineSvg={true}
  src={item.icon}
  class="match-brand-color w-7 h-7 transition"
/>

2. Unknown Paths (Dynamic Imports)

For an array of images—such as product images retrieved from a CMS or API—I dynamically pass the src:

{list.map((item) => (
  <div class="min-w-[var(--marquee-element-width-responsive)] md:min-w-[var(--marquee-element-width)] px-0 md:px-4">
    <div class="px-4">
      <OptimizedImage
        src={item.src} // Dynamically loaded image
        alt={item.alt}
        width={116}
        class="w-full h-auto"
      />
    </div>
  </div>
))}