v-bind image src with a computed property in Vue.JS

Question

I have a JSON file with some objects, which are getting rendered out using a computed property

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}
     ]
}

All data is getting rendered out with no errors.

script tag:

computed:{
  filterById(){
      return this.exercises.find(exercises => exercises.id === this.exId)
    }
  }

template tag:

<div class="task-description">
  <h2>{{ filterById.description }}</h2>
  <img :src="`${filterById.image}`" alt="">
</div>

but for some reason I can not render the image, I am sure the path to the image is correct.

No problem, if you could reproduce your issue in a fiddle like this one: jsfiddle.net/boilerplate/vue then it would make it easier for us to debug and help you out. :) — maxshuty
– maxshuty, Commented Nov 22, 2020 at 14:17
please check this answer stackoverflow.com/a/53952017/8172857 — Boussadjra Brahim
– Boussadjra Brahim, Commented Nov 22, 2020 at 14:17
Here is the jsfiddle link. The only difference is that in my project I have my data with the exercises in an external JSON file and not in the script tag itself. jsfiddle.net/zu548Lky — David D.
– David D., Commented Nov 22, 2020 at 14:23

David D. · Accepted Answer · 2020-11-22 15:33:39Z

6

At the end I used the following method:

getImgUrl(path) {
    var images = require.context('../assets/img/')
    return images('./' + path + ".png")
}

and outputed the image like this

<img v-if="filterById.id == 7 || filterById.id == 6" :src="getImgUrl(filterById.image)">

answered Nov 22, 2020 at 15:33

David D.

1192 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

v-bind image src with a computed property in Vue.JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related