如何在Astro中获取优化图片且保留非特定路径的稳定主URL？

要同时满足主图src使用稳定原始路径和srcset自动生成优化变体的需求，不需要手动处理每张图，可通过「封装自定义图片组件+Vite配置保留原始图片路径」的方式实现：

1. 封装可复用的StableImage组件 #

创建src/components/StableImage.astro组件，利用Astro的getImage API批量生成优化后的图片变体，同时保留传入的原始路径作为主src：

---
import { getImage } from 'astro:assets';

interface Props {
  src: string; // Markdown文件同级的图片相对路径，比如./banner.jpg
  alt: string;
  widths?: number[]; // 自定义需要的适配尺寸，默认生成600/900/1200px三种
  format?: 'webp' | 'jpg' | 'png';
}

const { 
  src, 
  alt, 
  widths = [600, 900, 1200], 
  format = 'webp' 
} = Astro.props;

// 批量生成不同尺寸的优化图片，拼接成srcset格式
const srcset = (await Promise.all(
  widths.map(async (width) => {
    const optimizedImg = await getImage({ src, width, format });
    return `${optimizedImg.src} ${width}w`;
  })
)).join(', ');
---

<img
  src={src}
  srcset={srcset}
  alt={alt}
  loading="lazy"
  decoding="async"
/>

2. 在Markdown内容中调用组件 #

在你的内容集合（Content Collections）的Markdown文件里，直接引用该组件并传入同级图片的相对路径即可，无需手动处理每张图：

---
title: 我的旅行日志
date: 2024-05-20
---

# 北海道之行
<StableImage src="./hokkaido-snow.jpg" alt="北海道雪景" />

3. 配置Vite保留原始图片路径 #

在astro.config.mjs中添加Vite构建配置，确保Markdown同级的原始图片被原样复制到输出目录，保持和原内容一致的路径结构（这样主图的src就是稳定的非Astro特定URL）：

import { defineConfig } from 'astro/config';

export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            // 针对内容集合中的图片，保留原始路径结构
            if (assetInfo.name?.includes('src/content/')) {
              const relativePath = assetInfo.name.replace('src/content/', '');
              return relativePath;
            }
            // 其他资源仍使用Astro默认的哈希命名
            return 'assets/[name]-[hash][extname]';
          },
        },
      },
    },
  },
});

关键说明 #

• 图片必须放在内容集合目录下（而非public目录），这样既能被getImage识别并生成优化变体，又能通过Vite配置保留原始路径的副本。
• 自定义组件可根据需求扩展，比如添加sizes属性适配不同屏幕，或调整默认尺寸集合，所有图片都会自动套用配置，无需逐个修改。

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