CODEWITHSUNDEEP
vue.jsvue-router
L Tulip
L Tulip

Reputation: 59

vuejs set img src by using current route name

There is a file contains images.Every pictures'name is a route name. I want to change the img src attribute by current route name.But I can not get the full path,only can get the picture name.

<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>

enter image description here

Upvotes: 0

Views: 1889

Answers (2)

JJPandari
JJPandari

Reputation: 3522

Use this[this.$route.name] or this[$route.name] as the binding text for v-bind.

v-bind evals the text you pass in as javascript code (expression, to be more exact), with a bit extra trick of considering the variables in the expression to be members of the view-model (aka this).

The tricky part here is that we want this[this.$route.name], which is confusing to translate to the v-bind text with the "I'll fill in the this for you" rule Vue provides. I tested a bit and found both this[this.$route.name] and this[$route.name] works. Not sure why they work, however. :/

Upvotes: 0

moon cheese
moon cheese

Reputation: 471

You're not binding the src at all. You need to use the binding directive to bind the src.

Like this

<img :src="index">

or this

<img v-bind:src="index">

Upvotes: 1

Related Questions