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がよさそうです。
