vuejs set img src unter Verwendung des aktuellen Routennamens

Question

Es gibt eine Datei enthält Bilder.Jeder Bildername ist ein Routenname. Ich möchte das img src Attribut durch den aktuellen Routennamen ändern. Aber ich kann nicht den vollständigen Pfad bekommen, nur kann der Bildname erhalten.

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

Answer 1

Sie Bindung des src gar nicht. Sie müssen die Bindungsanweisung verwenden, um den Quellcode zu binden.

Gefällt Ihnen dieses

<img :src="index"> 

oder diese

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

Answer 2

Verwenden this[this.$route.name] oder this[$route.name] als verbindlicher Text für v-bind.

v-bind evals the text you pass in as javascript code (expression, to be more exact), mit einem kleinen zusätzlichen Trick, die Variablen im Ausdruck als Mitglieder des View-Modells zu betrachten (aka this).

Der schwierige Teil hier ist, dass wir this[this.$route.name] wollen, die verwirrend ist, um den V-Bind-Text mit der "Ich werde die this für Sie ausfüllen" Regel Vue bietet zu übersetzen. Ich testete ein bisschen und fand sowohl this[this.$route.name] als auch this[$route.name] funktioniert. Nicht sicher, warum sie arbeiten. :/