JavaScript

Nuxt.js|画像の参照方法のいろいろ

課題を持った人
課題を持った人
Nuxt.jsで画像を表示したいのですが、うまくいかずに困っています。助けてください!<img src=”/assets/images/sample.png”>という書き方だとうまくいきません(・´ω`・)
筆者
筆者
わかりました!僕も画像の参照方法がわからずに困ったことがあります。解決方法を書きますので参考にしてみてください。

assetsディレクトリの画像を参照する

assetsディレクトリの画像を参照する場合は、下記のように書きます。下記の例では、assetsディレクトリの中にimagesディレクトリを作成してsample.pngを参照しています。

「~」(チルダ)を付けるところが通常のHTMLと異なるところですね。

staticディレクトリの画像を参照する

staticディレクトリの画像を参照する場合は、下記のように書きます。

/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ファイルを読み込む)を使います。

ふぅ〜、いろいろなパターンがあって大変ですね。

筆者
筆者
以上、Nuxt.jsで画像を参照する方法でした。通常のHTMLと違うところが多々あるのでつまずくこともあると思いますが、すこしずつ覚えていくしかないですね!