使用 vue 访问 src 属性路径的 v-for 变量答案

【问题标题】：Accesing the v-for variable for the src attribute path w/vue使用 vue 访问 src 属性路径的 v-for 变量
【发布时间】：2020-01-18 10:00:20
【问题描述】：

我在 vue 中有一个 v-for 循环。我想使用数组项值作为我的 src 路径的一部分，如下所示：

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

在 Vue.js 中：

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

我尝试了一个计算属性，但没有成功。我收到“选项卡”未定义的错误。关于如何为我的源路径使用“选项卡”值的任何想法。谢谢。

【问题讨论】：

标签： vue.js

【解决方案1】：

<img v-bind:src="'./src/img/' + tab + '.png'">

【讨论】：

正确，但是如果你有 webpack 配置，那么你必须使用 require ('pathToSrcc') 链接：stackoverflow.com/questions/48847644/…
谢谢。我本可以发誓我试过了，但我想没有。我还应该指定我正在使用 browsify 的问题。