Vue CLIでの画像パスの指定方法・配置場所まとめ

Vue CLIを何となくで使っていると、つまづいてしまうのでが画像パスの指定です。
今回はどのフォルダに何を置いて、どのようにパスを指定すればいいのかまとめておきます。

画像の配置場所は2箇所ある

ややこしいのですが、Vue CLIにはsrc/assets/img内と、public/img内の2箇所の配置場所があります。
それぞれ参照方法も画像の扱いも違ってきます。

assets内

assetsのimg内に配置する場合は、最終的に表示されるときには、base64という形式にエンコードされて出力されます。

そのため、画像のキャッシュはされませんし、ただURLで参照しているわけではないので、CSSのbackground-imageなどでパスを書いて呼び出そうとしても、そのパスには画像がないので表示されません。

呼び出すときには、assetsの前に@/をつけるのが特徴です。

<img src="@/assets/img/sample.png">

src属性やv-bindの:srcで使うときにはassets内に画像を置いて指定します。

public内

public内に配置した画像ファイルは、プロジェクトルートにそのまま移動されます。

特にエンコードもされないので、「/public」も省いて普通に画像パスを入力すれば表示されます。

<img src="/assets/img/sample.png">

CSSのbackground-imageで利用したい画像は、publicに入れておかないと表示されないので注意が必要です。

2箇所の使い分け

この2箇所の使い分けは、webpackでコンパイルしたいかどうかの違いです。

• assets：webpackでコンパイルしたい
• public：webpackでコンパイルしたくない

CSSで利用したい場合は、コンパイルされてしまうとCSSで参照できなくなるのでpublicに置く必要があります。

普通にsrc属性にセットする画像であれば、どちらでもよさそうですが、webpackでコンパイルするとbase64形式になるので、base64形式のメリットが受けられます。

• 画像自体のHTTPリクエストが発生しない
  • ファイルサイズの小さな画像をいっぱい読み込む場合は、base64で読み込んだ方がリクエストが減らせる

ただ、base64形式にするデメリットも存在します。

• base64だとデータサイズが約37%増加する
• キャッシュされない

ファイルサイズの小さな画像やロゴはassetsに入れて、大きな画像やCSSで参照する画像はpublicがよさそうです。