小编Gen*_*ita的帖子

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

我正在与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} />)}

Run Code Online (Sandbox Code Playgroud)

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

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

javascript import image astrojs

3
推荐指数
1
解决办法
5238
查看次数

标签 统计

astrojs ×1

image ×1

import ×1

javascript ×1