» TechAcademyの無料体験

【Nuxt.js】画像参照の方法(assets・static)

【Nuxt.js】画像参照の方法(assets・static)Nuxt.js

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

Nuxt.jsで画像参照する方法

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

コメント

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