如何在Astro集合中实现半动态图片列表？

AI 小北

2026-7-20

Astro生成路由中匹配本地图片的CLS报错解决方法

在Astro项目的project集合生成路由中，尝试通过Astro.glob筛选对应slug的本地图片时，出现了"Missing height attribute"的报错——本质是Astro误将本地图片识别为远程资源，要求必须提供尺寸以避免CLS（布局偏移）。以下是解决步骤：

步骤1：从Astro.glob元数据中提取图片尺寸

Astro.glob导入本地图片时，每个模块会自带metadata字段，包含图片的原始宽高。修改图片筛选代码，同时提取尺寸信息：

const allPhotos = await Astro.glob('../../content/project/*/photo/*.jpg');
const photos = allPhotos
  .filter(module => module.default.src.includes(`/project/${slug}/photo/`))
  .map(module => ({
    src: module.default.src,
    width: module.metadata.width,
    height: module.metadata.height
  }));

注：把匹配条件改成/project/${slug}/photo/可以避免相似slug的误匹配，比如vstavačová和vstavačová-2

步骤2：渲染图片时传入宽高属性

无论使用Astro的<Image>组件还是原生<img>标签，都必须传入提取到的宽高：

使用Astro Image组件

{photos.map((photo, index) => (
  <Image 
    key={index}
    src={photo.src} 
    width={photo.width} 
    height={photo.height} 
    alt="项目展示图片" 
  />
))}

使用原生img标签

{photos.map((photo, index) => (
  <img 
    key={index}
    src={photo.src} 
    width={photo.width} 
    height={photo.height} 
    alt="项目展示图片" 
    loading="lazy"
  />
))}