Vue.JS에서 계산 된 속성이있는 v-bind 이미지 src
Nov 22 2020
계산 된 속성을 사용하여 렌더링되는 일부 개체가 포함 된 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>
하지만 어떤 이유로 이미지를 렌더링 할 수 없습니다. 이미지 경로가 정확하다고 확신합니다.
답변
2 DavidD. Nov 22 2020 at 15:33
마지막으로 다음 방법을 사용했습니다.
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)">