Nuxt.js で画像参照する方法(assets・static)

Nuxt.js で画像参照する方法(assets・static) Nuxt.js
記事内に広告が含まれています。

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

Nuxt.js で画像参照する方法(assets・static)

assets 配下から画像を指定する方法

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 配下の画像を参照する場合は、/static/ 以下のパスを記載すればOK。

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

assets ディレクトリと static ディレクトリの棲み分け

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

assets ディレクトリ

  • webpack したいアセット
  • 画像やcss、jsファイル

staticディレクトリ

  • webpack しないアセット(直接サーバのルート配下に配置する)
  • favicon や robots.txt、sitemap.xml など

参考:ディレクトリ構成 – NuxtJS

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

コメント

タイトルとURLをコピーしました