vue.jsで画像を表示(v-bind使用)

ディレクトリ

app
　├ assets
　|   L images
　|       L image1.jpg
　└ javascripts
        L components
             L TopImage.vue ←ここからimage1.jpg表示したい

今回はv-bindを使用。

＃TopImage.vue

<template>
  <div id="app">
    <img :src="topImage">
  </div>
</template>

<script>
export default {
  el: 'app',
  data: function () {
    return {
      topImage: require('../../assets/images/image1.jpg')
    }
  }
}
</script>

*requireを使うことで表示できた
*ディレクトリの構造がややこしいので注意