# Vue CLIでの画像パスの指定方法・配置場所まとめ
URL: https://webrandum.net/vue-cli-image-path/
公開日: 2020-09-04
更新日: 2020-09-04
カテゴリー: コーディング
タグ: Vue CLI, Vue.js
出典: Webrandum（著者: サイトウ マサカズ）
Vue CLIを何となくで使っていると、つまづいてしまうのでが画像パスの指定です。
今回はどのフォルダに何を置いて、どのようにパスを指定すればいいのかまとめておきます。
## 画像の配置場所は2箇所ある
ややこしいのですが、Vue CLIには`src/assets/img`内と、`public/img`内の2箇所の配置場所があります。
それぞれ参照方法も画像の扱いも違ってきます。
### assets内
`assets`の`img`内に配置する場合は、最終的に表示されるときには、base64という形式にエンコードされて出力されます。
そのため、画像のキャッシュはされませんし、ただURLで参照しているわけではないので、CSSの`background-image`などでパスを書いて呼び出そうとしても、そのパスには画像がないので表示されません。
呼び出すときには、`assets`の前に`@/`をつけるのが特徴です。
```
```
src属性やv-bindの:srcで使うときにはassets内に画像を置いて指定します。
### public内
`public`内に配置した画像ファイルは、プロジェクトルートにそのまま移動されます。
特にエンコードもされないので、「/public」も省いて普通に画像パスを入力すれば表示されます。
```
```
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`がよさそうです。