v-Vue.JSの計算されたプロパティで画像srcをバインドします

Question

計算されたプロパティを使用してレンダリングされているいくつかのオブジェクトを含むJSONファイルがあります

JSON：

{
     "id": 6,
     "formula": "2+2",
     "description": "Just a description.",
     "image": "../assets/img/id6.png",
     "answers": [
        { "answerId": 0, "answerInput": "Funktion", "correct": false},
        { "answerId": 1, "answerInput": "Relation", "correct": true}
     ]
}

すべてのデータはエラーなしでレンダリングされています。

スクリプトタグ：

computed:{
  filterById(){
      return this.exercises.find(exercises => exercises.id === this.exId)
    }
  }

テンプレートタグ：

<div class="task-description">
  <h2>{{ filterById.description }}</h2>
  <img :src="`${filterById.image}`" alt="">
</div>

しかし、何らかの理由で画像をレンダリングできないため、画像へのパスは正しいと確信しています。

Answer 1

最後に、次の方法を使用しました。

getImgUrl(path) {
    var images = require.context('../assets/img/')
    return images('./' + path + ".png")
}

このように画像を出力しました

<img v-if="filterById.id == 7 || filterById.id == 6" :src="getImgUrl(filterById.image)">