如何将img src绑定到Vue中的数据 [英] How to bind img src to data in Vue

问题描述

我的Vue Webpack脚本中具有以下内容:

I have in my vue webpack script the following:

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

然后在我的html中，我试图将本地src元素绑定到img，但无法正常工作.这是我的html外观:

And then in my html, I'm trying to bind the local src element to an img but I can't get it to work. Here is what my html looks like:

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

当我的img源未像这样进行数据绑定时，它可以正常工作:

It works fine when my img source is not data-bound such as this:

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

如果本地图像绑定在Vue中，为什么不加载本地图像?

这是我的目录的样子:

推荐答案

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

If you're using vue-cli you have to remember that everything is processed as a module, even images. You'd need to use require if the path is relative in JS, like this:

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

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

You can find a lot more details about this here: http://vuejs-templates.github.io/webpack/static.html

这篇关于如何将img src绑定到Vue中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！