在 Vue.JS 中使用计算属性 v-bind 图像 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) {&nbsp; &nbsp; var images = require.context('../assets/img/')&nbsp; &nbsp; return images('./' + path + ".png")}并输出这样的图像<img v-if="filterById.id == 7 || filterById.id == 6" :src="getImgUrl(filterById.image)">