javascript - Vue中如何将img src绑定(bind)到数据

Question

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

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

然后在我的 html 中，我试图将本地 src 元素绑定(bind)到 img，但我无法让它工作。这是我的 html 的样子:

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

当我的 img 源不是这样的数据绑定(bind)时，它工作正常:

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

如果在 Vue 中绑定(bind)了数据，为什么我的本地镜像无法加载？

这是我的目录的样子:

Answer 1

如果您使用的是 vue-cli，您必须记住，所有内容都作为一个模块进行处理，即使是图像。如果路径在 JS 中是相对的，则需要使用 require，如下所示:

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

您可以在此处找到更多相关详细信息:http://vuejs-templates.github.io/webpack/static.html