0

I have a v-for loop in vue. I would like to use the array item value as part my src path like so:

<button
          v-for="tab in tabs"
          v-bind:key="tab"
          v-on:click="getSportsData( tab )"
        > 
<img src="./src/img/" + tab + ".png">
</button>

In Vue.js:

data() {
    return {
      tabs: ["MLB", "NFL", "NBA"],
      won: false,
      etc..
     }

I have tried a computed property but no good.I get error that "tab" is not defined. any idea's on how to use the "tab' value for my source path. Thanx.

Alan
  • 1,067
  • 1
  • 23
  • 37

1 Answers1

2
<img v-bind:src="'./src/img/' + tab + '.png'">
Stephen Thomas
  • 13,843
  • 2
  • 32
  • 53
  • 1
    correct, however if you have a webpack configuration then you have to do with require ('pathToSrcc') link : https://stackoverflow.com/questions/48847644/how-to-bind-img-src-to-data-in-vue – Cosimo Chellini Sep 17 '19 at 14:41
  • Thank you. I could have sworn I tried that but I guess not. I should have specified also for question that I'm using browsify. – Alan Sep 17 '19 at 15:19