v-bind image src mit einer berechneten Eigenschaft in Vue.JS
Nov 22 2020
Ich habe eine JSON-Datei mit einigen Objekten, die mithilfe einer berechneten Eigenschaft gerendert werden
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}
]
}
Alle Daten werden fehlerfrei gerendert.
Skript-Tag:
computed:{
filterById(){
return this.exercises.find(exercises => exercises.id === this.exId)
}
}
Vorlagen-Tag:
<div class="task-description">
<h2>{{ filterById.description }}</h2>
<img :src="`${filterById.image}`" alt="">
</div>
aber aus irgendeinem Grund kann ich das Bild nicht rendern, ich bin sicher, dass der Pfad zum Bild korrekt ist.
Antworten
2 DavidD. Nov 22 2020 at 15:33
Am Ende habe ich folgende Methode angewendet:
getImgUrl(path) {
var images = require.context('../assets/img/')
return images('./' + path + ".png")
}
und gab das Bild so aus
<img v-if="filterById.id == 7 || filterById.id == 6" :src="getImgUrl(filterById.image)">