vuejs根据路由名称动态改变img src

Question

1.根据当前路由的名称动态改变img src
2.有个img/footer文件夹，里面的图片名称和路由名称是一一对应的
3.打算实现的效果是获取当前路由名称，由于路由名称和图片名称一致，把路由名称（即图片名称）赋值给img src，从而读取到图片，但是像我这么写的话只能得到路由名称，不会编译成完成图片路径

<template>

    <!-- footer -->
    <div class="index-footer">
      <img v-bind:src = "$route.name" />
    </div>
</template>

<script>
  import { Carousel } from 'iview'
  // export default {
  //   components: { Carousel }
  // }

  export default {
    name: 'index',
    data () {
      return {
        index: '/static/img/footer/index.png',
        more: '/static/img/footer/index.png',
        product: '/static/img/footer/index.png',
        information: '/static/img/footer/index.png',
        news: '/static/img/footer/index.png',
        down: '/static/img/footer/index.png',
        enterprise: '/static/img/footer/enterprise.png',
        value3: 0,
        setting: {
          autoplay: true,
          autoplaySpeed: 4000,
          dots: 'inside',
          trigger: 'hover',
          arrow: 'hover'
        },
        scrolled: false
      }
    },
    components: {
      Carousel
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*footer*/
.index-footer>img{
  width: 100%;
  height: 100%;

}
</style>

浏览器查看：

Answer 1

数据改成

imgList:{
index: '/static/img/footer/index.png',
        more: '/static/img/footer/index.png',
        product: '/static/img/footer/index.png',
        information: '/static/img/footer/index.png',
        news: '/static/img/footer/index.png',
        down: '/static/img/footer/index.png',
        enterprise: '/static/img/footer/enterprise.png'
        }

然后{{imgList[$route.name]}}