【Vue.js】require()を使っても画像が表示されないとき

環境

vue 3.0.4
vue/cli 5.0.0-alpha.5
vue-loader 16.1.2

Vue.jsでsrcにv-bindした画像が表示されない

sample.vue

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

<script>
export default {
  data() {
    return {
      imgPath: "../assets/test.png"
    }
  }
}
</script>

最初に試した方法

画像パスにrequire()を追加する

参考：
【Vue】v-bindで画像が表示されない時の対処法。computedで処理したプロパティで画像を表示する
【Vue.js】なぜかimgが表示されない時の解決法とその理由

vue.config.js に esModule: false を記述する

参考：
Vue.js + webpackで画像表示されない
Vue is returning [object Module] to img src

→自分の環境ではどちらの方法でも解消できませんでした。

解決方法

require("パス").defaultとすると解決する

sample.vue

<script>
export default {
  data() {
    return {
      imgPath: require("../assets/test.png").default
    }
  }
}
</script>

参考：
https://github.com/vuejs/vue-loader/issues/1612
こちらの25-Apr-2020に書かれているコメント

日本語の情報が無さそうだったので記事にしました。