How to bind img src to data in Vue

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') }

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

simply for binding img src to data, just require the file address :

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

example below shows ../assets/logo.png :

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

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