从 Astro 中的文件夹动态导入所有图像

Question

我正在与Astro合作。该项目使用了相当多的图像，我想简化当前添加新图像的方式。我的路线是这样的：

example.com/图片/[集合]

（“[”和“]”代表动态路由）

例如允许：

example.com/pictures/mixed-tecnique

example.com/pictures/graphite

example.com/pictures/acrylic

---

在文件中pages/pictures/[collection].astro我想执行以下操作（或类似的操作）：

---
import * as collections from "public/img/collections"

const { collection } = Astro.props
---

{collections[collection].map(imgSrc => <img src={imgSrc} />)}

所以现在，要拥有新的 Collection 路线，我只需创建一个新文件夹并将图像放入其中。

有什么方法可以达到相同的结果吗？提前致谢！！

Answer 1

这就是我实现的目标：

---
const images = await Astro.glob("/src/assets/img/salon/*").then(files => {
  return files.map(file => file.default);
});
---

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    {
      images.map(image => (
        <div class="flex items-center justify-center swiper-slide">
          <img
            class="object-contain h-full rounded-lg"
            src={image}
            alt=""
            loading="lazy"
          />
        </div>
      ))
    }
  </div>
  ...
</div>

如果您正在使用实验性资产功能：

{
  images.map(({ src /* width and height is also available */ }) => (
    <div class="flex items-center justify-center swiper-slide">
      <img
        class="object-contain h-full rounded-lg"
        src={src}
        alt=""
        loading="lazy"
      />
    </div>
  ))
}