Nuxt.js(Vue.js)で動的にimageを変更する方法

やりたかったこと

Nuxtでimgタグのsrcプロパティーを動的に変更したかった。

困ったこと

以下のようなコードではリソースが受け取れず、上手くいきませんでした。

<img :src="imgSrc">
.
.
imgSrc: "~/assets/img/image.png"

解決策

イメージ画像のpathをrequireしてあげる事で解決することができました。
具体的には以下のコードを参照ください。

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

<script>
export default {
  data() {
    return {
      imgSrc: require("~/assets/img/image.png")
    }
  }
}
</script>

background-imageを動的に変更したいなど色々なシーンで使えると思います。
以上、備忘録でした。