Getting Started

パッケージをインストールする。

pnpm add astro-image-processor

bun add astro-image-processor

yarn add astro-image-processor

npm install astro-image-processor

Astroの設定に追加する。

import { defineConfig } from "astro/config";
import { astroImageProcessor } from "astro-image-processor";

export default defineConfig({
  integrations: [
    astroImageProcessor(),
  ],
});

共通CSSを設置する。

---
import GlobalStyles from 'astro-image-processor/components/GlobalStyles.astro';
---

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Astro Image Processor</title>
  </head>
  <body>
    <h1>Astro Image Processor</h1>
    <slot />
  </body>
</html>

<GlobalStyles />

ページにコンポーネントを設置する。

---
import Picture from 'astro-image-processor/components/Picture.astro';
import Layout from '../layout/Layout.astro';
---

<Layout>
  <Picture src="/src/assets/images/image.png" alt="Sample image" />
</Layout>

ビルドする。

pnpm build

bun run build

yarn build

npm build