欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue动态设置img的src路径

程序员文章站 2024-01-19 14:04:04
...

相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接当做字符串了,当然网上也有很多方法,这里使用的是最有效的方法。
看代码:
使用导入资源的方式

<template>
    <div @click="home">
      <img :src="home_url" alt="..." style="height: 10vw">
    </div>
</template>
<script>
  // 下面是导入两张图片的相对地址
  import home_no from '../static/icon/home_no.png'
  import home from '../static/icon/home.png'
  export default {
    name: "newbase",
    data () {
      return {
        home_url: home
      }
    },
    methods: {
      home() {
        this.home_url = home
      }
    }
  }
</script>

这样就可以非常有效的,动态改变img的图片路径。