画像のバンドル

画像をページやコンポーネントからimportすると、pluginSsg()がViteで処理して出力し、参照URLをビルド後のものへ書き換えます。追加のプラグインは不要です。

ここではトップページへ写真を一枚追加します。通常のバンドルでは画像のサイズや形式は変えません。リサイズやWebPへの変換は画像最適化で扱います。

画像を配置する

src/assets/へ、1200×800ピクセルのphoto.jpgを用意します。別の大きさの画像を使う場合は、コードのwidthとheightも合わせてください。

プロジェクト構成

src/
├── assets/
│   └── photo.jpg
└── pages/
    └── index.tsx

src/assets/という名前に特別な制約はありません。ページの探索対象外に置き、参照して利用します。

importでURLを取得する

画像の既定 importは、公開用のURLになります。その値をimgのsrcへ渡します。

src/pages/index.tsx

import photoUrl from "../assets/photo.jpg"

export default function Page() {
  return (
    <>
      <h1>My Site</h1>
      <img src={photoUrl} alt="制作スタジオの風景" width={1200} height={800} />
    </>
  )
}

このimportは、ページをブラウザでReactアプリとして動かす指定ではありません。HTMLに画像のURLが入り、画像ファイルが出力されます。

ビルド結果を確認する

独立したファイルとして出力する例では、build.assetsInlineLimitを0にします。

vite.config.ts

import { defineConfig, pluginSsg } from "minista"

export default defineConfig({
  plugins: [pluginSsg()],
  build: { assetsInlineLimit: 0 },
})

ビルド結果の例

dist/
├── index.html
└── assets/
    └── photo-[hash].jpg

[hash]は内容に応じて決まる文字列を表しています。実際の名前はViteの出力設定に従います。生成HTMLのsrcにも、確定したファイル名が反映されます。

dist/index.htmlの抜粋

<img
  src="/assets/photo-[hash].jpg"
  alt="制作スタジオの風景"
  width="1200"
  height="800"
/>

HTML属性から参照する

プロジェクトルートを基準とするパスをsrcへ直接書くこともできます。

<img
  src="/src/assets/photo.jpg"
  alt="制作スタジオの風景"
  width={1200}
  height={800}
/>

img[src]やimg[srcset]などはバンドルの対象です。ただし、meta[content]やa[href]など、すべてのURL属性を処理するわけではありません。OGP画像などに使う場合はimportで得たURLを渡します。

./photo.jpgのようなHTML内の相対URLはバンドル対象になりません。importの相対パスと、HTML属性へ書くURLは区別してください。

インライン化を指定する

画像ファイルを別途出力せず、データURLとして埋め込む場合はimportへ?inlineを付けます。

import iconUrl from "../assets/icon.svg?inline"

描画側のimportでも明示的にインライン化されます。小さなアイコンなどに使えますが、HTML自体のサイズは増えます。

名前を変えずにコピーしたいファイルはpublicへ置きます。

次はCSSのバンドルでスタイルを追加します。

前のページpublicのファイル