Nuxt jsデータからバインディングした値で画像を表示させる

#はじめに
タイトルの日本語があってるのかわかりませんが、やりたいのはこういう事👇です。ソースを見てわかってください。。。

assets/js/data.js

export const resultsData = [
    {
        id: "00",
        text: "熱中する人",
        img: "charmander.png"
    },
    {
        id: "01",
        text: "達成する人",
        img: "caterpie.png"
    },
    {
        id: "02",
        text: "挑戦する人",
        img: "charmeleon.png"
    },
 ]

ここで定義したデータに画像が入ってます。

それを

<h2>{{ result.text }}</h2>

<script>
import { resultsData } from "~/assets/js/data.js";

 computed: {
    result() {
      return resultsData.find(
        (result: { id: string }) => result.id == (this as any).answerKey
      );
    },
  },
</script>

みたいな感じで画像を取得するにはどうしたら良いか？
というお話です！

#バッククオートが重要

<h2>{{ result.text }}</h2>
  <div class="mt-3">
        <img
          :src="require(`@/assets/images/type/${result.img}`)"
          class="contentImg"
        />
      </div>

<script>
import { resultsData } from "~/assets/js/data.js";

 computed: {
    result() {
      return resultsData.find(
        (result: { id: string }) => result.id == (this as any).answerKey
      );
    },
  },
</script>

この部分がなんて書いたら良いか分からず、、色々と試行錯誤した結果このようになりました！

        <img
          :src="require(`@/assets/images/type/${result.img}`)"
          class="contentImg"
        />

requireを""で囲って、（）内のpathの部分はバッククオートで囲うのが正解なようです！