assetsディレクトリの画像を参照する
assetsディレクトリの画像を参照する場合は、下記のように書きます。下記の例では、assetsディレクトリの中にimagesディレクトリを作成してsample.pngを参照しています。
1 | <img src="~/assets/images/sample.png"> |
「~」（チルダ）を付けるところが通常のHTMLと異なるところですね。
staticディレクトリの画像を参照する
staticディレクトリの画像を参照する場合は、下記のように書きます。
1 | <img src="images/sample.png"> |
/static/images/sample.pngと書きたくなりますが、imagesから指定すればOKです。注意しましょう。
ところで、Nuxt.jsには「assets」と「static」2つのディレクトリがありますが、画像はどちらのディレクトリに格納するのがいいのでしょうか。
それは画像をどのように扱いたいかによって変わります。
webpackのモジュールとして扱う場合は、assetsに格納しましょう。webpackのモジュールとして扱うことで、画像をデータURL化してJavaScriptで扱うことができるようになります。JavaScriptで扱えるようになると、画像ファイルを単体でダウンロードする必要がなくなります。つまりサーバへのリクエスト回数を減らすことができるのです。しかし何でもかんでもwebpackで扱うのは良くありません。webpackで扱うのはデータ容量の小さいアイコンのようなものに限定するのが良さそうです。
一方、staticディレクトリはwebpackでの処理を行わない画像を格納します。データ容量の大きい画像はstaticに格納しましょう。
まとめると、
- データ容量の小さな画像は「assets」に格納
- データ容量の大きな画像は「static」に格納
と覚えておくと良いかと思います。
vue-lazyloadのようなライブラリで画像を参照する場合はrequireを使うこともある
vue-lazyloadのようなライブラリを使う場合は、参照方法が異なります。require（モジュール化されたJavaScriptファイルを読み込む）を使います。
1 | <img v-lazy="require('~/assets/images/sample.png')"> |
ふぅ〜、いろいろなパターンがあって大変ですね。
