为了账号安全,请及时绑定邮箱和手机立即绑定

在 Vue.JS 中使用计算属性 v-bind 图像 src

在 Vue.JS 中使用计算属性 v-bind 图像 src

陪伴而非守候 2023-08-24 15:45:06
我有一个包含一些对象的 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>但由于某种原因我无法渲染图像,我确信图像的路径是正确的。
查看完整描述

1 回答

?
RISEBY

TA贡献1856条经验 获得超5个赞

最后我使用了以下方法:


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)">


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 90 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信