Astro 5中使用<Image />组件结合图片集合时出现构建错误

问题核心 #

用Vite的import glob在src/content.config.ts创建图片集合，开发环境(npm run dev)中Image组件能正常处理图片缩放优化，但执行npm run build时抛出“Error: ENOENT: no such file or directory”错误。本质是开发与构建阶段Vite对文件路径的处理逻辑不一致，导致Astro Image组件找不到原始图片文件。

解决步骤 #

1. 改用文件系统读取替代Vite glob（推荐） #

避开Vite glob的路径差异问题，直接通过Node.js的fs模块读取图片目录：

// src/content.config.ts
import { defineCollection } from 'astro:content';
import { z } from 'zod';
import fs from 'fs/promises';
import path from 'path';

const images = defineCollection({
  schema: z.object({
    src: z.string(),
    alt: z.string(),
  }),
  async load() {
    // 定位图片目录
    const imgDir = path.join(process.cwd(), 'src/assets/images');
    const files = await fs.readdir(imgDir);
    
    // 过滤图片文件并生成集合数据
    return files
      .filter(file => /\.(png|jpg|jpeg|webp|avif)$/.test(file))
      .map(file => ({
        id: file.split('.')[0],
        data: {
          src: `/src/assets/images/${file}`,
          alt: file.split('.')[0],
        },
      }));
  },
});

export const collections = { images };

2. 确认Astro资产目录配置正确 #

在astro.config.mjs中确保资产目录指向正确路径，让Astro能识别原始资产：

import { defineConfig } from 'astro/config';

export default defineConfig({
  assetsDir: 'src/assets',
  // 其他配置项...
});

3. 调整Image组件引用逻辑 #

从内容集合获取图片数据后，直接传入原始相对路径即可：

---
import { getCollection } from 'astro:content';
import { Image } from 'astro:assets';

const images = await getCollection('images');
---

{images.map(img => (
  <Image 
    src={img.data.src} 
    alt={img.data.alt} 
    width={300} 
    height={200} 
    format="webp"
  />
))}

4. 若坚持用Vite glob：获取原始文件路径 #

如果一定要用Vite glob，需通过配置参数获取原始文件路径，而非打包后的URL：

// src/content.config.ts
import { defineCollection } from 'astro:content';
import { z } from 'zod';
import path from 'path';

const images = defineCollection({
  schema: z.object({
    src: z.string(),
    alt: z.string(),
  }),
  load() {
    // 用resolve: 'path'获取原始文件路径
    const imagePaths = import.meta.glob('/src/assets/images/*', { eager: true, resolve: 'path' });
    
    return Object.entries(imagePaths).map(([importPath, filePath]) => ({
      id: path.basename(filePath, path.extname(filePath)),
      data: {
        src: filePath,
        alt: path.basename(filePath, path.extname(filePath)),
      },
    }));
  },
});

export const collections = { images };

原因说明 #

开发环境中，Vite Dev Server会实时映射原始文件路径，Image组件能直接找到源文件；但构建阶段Vite会对资产进行哈希重命名并输出到dist目录，直接用glob返回的打包后URL会让Image组件找不到原始源文件，从而触发ENOENT错误。

内容的提问来源于stack exchange，提问作者muimota