Vue CLI 画像の配置とパスの指定方法

Vue CLI で作成したプロジェクトでは画像の配置箇所が 2 箇所あります。

# src/assets ディレクトリ

画像の配置箇所の 1 つはsrc/assetsディレクトリ内です。
このディレクトリに配置された画像は base64 形式にエンコードされて表示されます。 画像パスの指定は以下のようになります。

<template>
    <div>
        <img src="@/assets/hoge.jpg" />
    </div>
</template>

また、require()を使ってモジュールとして読み込む方法もあります。

<template>
    <div>
        <img :src="imgSrc" />
    </div>
</template>

<script>
  export default {
    data(){
      return {
        imgSrc: require('@/assets/hoge.jpg')
      }
    }
  }
</script>

assets 内の画像を CSS で背景画像として読み込みたい場合の指定方法。

<style lang="scss" scoped>
.hoge {
  background-image: url('~@/assets/hoge.jpg');
}
</style>

# public ディレクトリ

もう一つの配置箇所がpublicディレクトリ内です。
画像パスの指定は以下のようになります。

<template>
    <div>
        <img src="/hoge.jpg" />
    </div>
</template>

# それぞれのメリット・デメリット

前述した通り、src/assets内に配置した画像は webpac でコンパイルされて、base64 形式にエンコードされます。
base64 形式のメリットは、HTTP リクエストが発生しないのでページ内の HTTP リクエストの回数が減らせます。
ただし、base64 形式にするとデータサイズが約 37%増加する、キャッシュされない（解決方法はあるみたいです。）といったデメリットもあります。
それを踏まえて、アイコン等の小さい画像のみsrc/assetsに配置する等の考慮はしたほうがよさそうです。