vue dynamically sets the src path instance of img

I believe that the development friends have encountered this problem. When dynamically switching the src of the img tag, the path written does not take effect. The reason is that vue does not treat your path string as a path, but directly treats it as a string. Of course, there are many methods on the Internet, and the most effective method is used here.

Look at the code:

Use the method of importing resources

<template>
 <div @click="home">
  <img :src="home_url" alt="..." style="height: 10vw">
 </div>
</template>
<script>
 // Below are the relative addresses for importing two pictures import home_no from '../static/icon/home_no.png'
 import home from '../static/icon/'
 export default {
 name: "newbase",
 data () {
  return {
  home_url: home
  }
 },
 methods: {
  home() {
  this.home_url = home
  }
 }
 }
</script>

This can be very effective and dynamically change the image path of img.

The above example of the src path of Vue dynamically setting img is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.