如何将img src绑定到Vue中的数据

Question

我在我的vue webpack脚本中有以下内容:

<script>
  export default {
    data () {
      return {
        repos: [
          {name: 'test1', src: '../assets/logo.png'},
          {name: 'test2', src: '../assets/underscore.png'},
           ...
        ]
      }
    }
  }
</script>

然后在我的HTML中,我正在尝试将本地src元素绑定到img,但我无法让它工作.这是我的html的样子:

<div v-for="repo in repos" :key="repo.name">
  <img :src="repo.src" />
</div>

当我的img源不是数据绑定时,它工作正常,如下所示:

<img :src="../assets/logo.png" />

如果在Vue中绑定数据,为什么我的本地图像不会加载？

这是我的目录:

Answer 1

如果您正在使用vue-cli,则必须记住所有内容都作为模块处理,甚至是图像处理.require如果JS中的路径是相对的,你需要使用,如下所示:

{ name: 'test1', src: require('../assets/logo.png') }

你可以在这里找到更多关于这方面的细节:http://vuejs-templates.github.io/webpack/static.html

Answer 2

只是为了将 img src 绑定到数据，只需要文件地址：

<img v-bind:src="require('../image-address/' + image data)" />

下面的示例显示../assets/logo.png ：

<template>
          <img v-bind:src="require('../assets/' + img)" />
</template>

<script>
export default {
  data: function() {
    return {
      img: "logo.png"
    };
  }
};
</script>