我有一个包含一些对象的 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>
但由于某种原因我无法渲染图像,我确定图像的路径是正确的。
最佳答案
最后我使用了以下方法:
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)">
关于javascript - 使用 Vue.JS 中的计算属性 v-bind 图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64955125/