Gridsomeでの画像の使い方・保存場所

画像の呼び出し方は二つ

Gridsomeでは画像の呼び出しにオリジナルの「g-image」というコンポーネントを用意しています。GridsomeはVue.jsなので、通常通りimgタグを使うことも可能です。

// g-imageコンポーネント

<g-image src="~/assets/imgs/title.png" width="83px" :alt="$static.metadata.siteName"/>

// 通常のimgタグ

<img :src="'~/assets/imgs/title.png'" width="83px" :alt="$static.metadata.siteName"/>

コード的には、g-image方がシンプルに使えるというメリットがありますが、変数を含む場合はどちらにしろプロパティにするのであまり差はありません。

しかし、g-imageコンポーネントは、画像を内部的に最適化してくれるので、アイコンなどのサイト全体で使う画像はg-imageにした方が良いかもしれません。

Gridsomeでは、他の静的サイトジェネレータと同様に、プロジェクトルートのstaticディレクトリの中身を、そのままプロジェクトルートに設置します。ですので、static以下に画像を保存すればまず問題なく使えます。

一方で、src以下にassetsディレクトリ（デフォルトではない）を作成すれば、テンプレートなどVue.jsのコードからアクセスしやすくなります。どちらにするかは、画像の運用方法次第ですが、

とするのが多いようです。