Nuxt.js で画像参照する方法（assets・static）

最近、Nuxt.js を使って開発する機会があったのですが、画像がうまく表示されず、少し詰まったので、下記に Nuxt.js で画像参照を行う方法について書きました！

タップできる目次

assets 配下の画像を参照する場合、以下のように書いても画像を参照することができません。

<img src="/assets/images/hoge.png">

公式Doc を見ると、assets ディレクトリにリンクする必要がある場合は、assets の前にスラッシュをつけて、チルダをつけてあげると画像を参照できるようになります。

<img src="~/assets/images/hoge.png">

css ファイルの中で、assets ディレクトリにリンクする必要がある場合は、スラッシュなしで記述する必要があります。

background: url("~assets/hoge.png");

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

また、チルダの代わりに「@」をつけても同じように画像を参照することができましたが、公式Doc では、以下のように記載してあります。

エイリアスとして ~ を使うことをお勧めします。@ はまだサポートされていますが、CSS の background image などすべてのケースで機能するわけではありません。
アセット – NuxtJS

static 配下の画像を参照する場合は、/static/ 以下のパスを記載すればOK。

<img src="/images/hoge.png">

Nuxt 内では、file-loader や url-loader を使って、ハッシュ値や指定した閾値より小さい画像をbase64 エンコードしたものを利用するよう変換してくれるので、基本的に画像は、assets 配下に置いておくのが良いと思っています。

Nuxt.js関連のおすすめUdemy講座

Nuxt.js関連のおすすめ書籍

リンク