
最近、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 など
Nuxt.js関連のおすすめUdemy講座
Nuxt.js関連のおすすめ書籍
リンク
コメント