Vue에서 계산된 속성을 사용하여 v-bind 이미지 src를 만듭니다.JS

Vue에서 계산된 속성을 사용하여 v-bind 이미지 src를 만듭니다.JS

계산된 속성을 사용하여 렌더링되는 일부 개체가 포함된 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)">

언급URL : https://stackoverflow.com/questions/64955125/v-bind-image-src-with-a-computed-property-in-vue-js