Getting Started

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

sh pnpm add astro-image-processor

sh bun add astro-image-processor

sh yarn add astro-image-processor

sh 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>

ビルドする。

sh pnpm build

sh bun run build

sh yarn build

sh npm build