Vue Series - dynamically set img src tag attribute

statement

This switched: VUE dynamically set the img src path

text

I believe when the development of small partners have encountered this problem, dynamic switching src img tag, write the path is not valid, because vue did not put your path string as a path to deal with, but directly as a string of course there are many online method used here is the most effective way.
Look at the code:
use of imported resources

<template>
    <div @click="home">
      <img :src="home_url" alt="..." style="height: 10vw">
    </div>
</template>
<script>
  // The following are introduced into the two pictures relative address 
  Import from home_no '../static/icon/home_no.png' 
  Import from Home '../static/icon/home.png' 
  Export default {
    name: "newbase",
    data () {
      return {
        home_url: home
      }
    },
    methods: {
      home() {
        this.home_url = home
      }
    }
  }
</script>

This can be very effective, dynamic change img image path.

 

Guess you like

Origin www.cnblogs.com/yadongliang/p/11690266.html