画像の管理

Nuxt.js のプロジェクトにおける画像の取り扱い方法を確認してみましょう。

staticに配置した画像は、そのままdistフォルダに展開されるため、 Nuxt.jsのプロジェクトでは、通常通り画像を利用することが出来ます。

# 画像ファイルの利用

staticフォルダに置いた画像は npm run generate コマンドで、そのままdistフォルダに展開されます。

static/images フォルダを作成し、この中で画像を管理する場合、 static/images/hero.jpg のパスで作成した画像ファイルの参照は、以下のような形で記述することができます。

<template>
  <div>
    ...
    <img src="/images/hero.jpg" alt=""> 
    ...
  </div>
</template>

TIP

URLにstaticを含まなくて良い点に注意してください。

staticに置かずに、assetsフォルダに画像を置いて配信することも可能です。

assets/images フォルダを作成し、この中で画像を管理する場合、 assets/images/hero.jpg のパスで作成した画像ファイルの参照は、以下のような形で記述することができます。

<template>
  <div>
    ...
    <img src="~assets/images/hero.jpg" alt=""> 
    ...
  </div>
</template>

~assets から始まるURLで指定された画像は、 assetsフォルダからの参照として認識されます。

static フォルダに配置した画像と異なり、assets フォルダに配置した画像は、 npm run generate コマンド実行時に、そのまま dist フォルダに展開されるのではなく、ハッシュ付きの特別なファイル名で展開されます。

distフォルダへの展開時に付与されるファイル名のハッシュ値は、 generateの度に自動的に変更されるため、同じファイル名で画像が変更された際のキャッシュ管理に役立ちます。

またassetsから読み込んだ画像フォルダが1KB未満の小さな容量であったとき、自動的にbase64エンコードされたデータがhtml上で展開されるため、小さなアイコンファイル等を複数利用しているケースの画像配信が高速化されます。

次のステップに進む前に以下の内容をもう一度確認しておきましょう。