【Nuxt】テンプレートでassetsとstatic配下のリソースを参照するときの書き方

Nuxt.js
スポンサー

はじめに

この記事ではNuxt.jsの「assets」ディレクトリと「static」ディレクトリの使い分けと、ディレクトリに配置したファイルの参照方法について紹介します。

assetsとstaticディレクトリの使い分け

Nuxtでは画像ファイル等を「assets」、または「static」ディレクトリに配置します。

この2つのディレクトリの使い分けは、webpackでコンパイルしたいかどうかで判断します。

webpackでコンパイルしたい場合は「assets」ディレクトリに、コンパイルしたくない場合は「static」ディレクトリにファイルを入れます。

それぞれのファイルの使用方法

「assets」と「static」のファイルを使用するときですが、パスの指定方法が変わってきます。

下記ではそれぞれのディレクトリに用意した画像ファイルを、<template>タグ内で使用するときの書き方を例に示します。

assetsディレクトリのファイルを参照する

assets配下のファイルを使用する場合は「~/assets」を指定します。

<template>
  <img src="~/assets/image/icon.png" width="16" height="16" />
</template>

※ ドキュメントにあるように、CSSで参照する際はエイリアスに注意してください。

nuxtjs.org
Nuxt.js official website

Warning: Nuxt 2.0からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets(スラッシュなし)か、@ のエイリアスを使わなければなりません。 例:background: url(“~assets/banner.svg”)

staticディレクトリのファイルを参照する

static配下のファイルを使用する場合はディレクトリ配下のパスのみを指定します。

<template>
  <img src="/image/icon.png" width="16" height="16" />
</template>
Nuxt.jsVue.js
スポンサー
フォローする
スポンサー
Public Constructor